js行号显示的文本框实现效果(兼容多种浏览器 )


Posted in Javascript onOctober 23, 2015

利用js打造的一个非常实用简易的文本编辑框,可以显示行号并且同时兼容ie和firefox等主流浏览器,如下效果图:

js行号显示的文本框实现效果(兼容多种浏览器 )

以下是该效果的源码:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<title>显示行号的文本框效果,兼容ie、火狐等浏览器</title> 
<style type="text/css"> 
#main{color:#666} 
textarea{border:1px solid #7f9db9;font-size:9pt;width:430px;color:#000} 
.grey{color:#999} 
#msg1,#msg2,#msg3,#msg4{ display:none} 
#ol{position:absolute;z-index:1;padding:0px;margin:0px;border:0px;background:#ecf0f5;width:23px;text-align:left; } 
#li{background:#ecf0f5;height:160px;overflow:hidden;width:32px;border-right:0;line-height:20px;margin:0px;padding:0px;text-align:center} 
#c2{font-family:Arial, Helvetica, sans-serif;height:160px; margin:0px; width:416px;padding:0 0 0 35px;overflow-x: hidden;line-height:20px;} 
</style> 
<script type="text/javascript"> 
String.prototype.trim2=function(){ 
  return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 
function F(objid){ 
  return document.getElementById(objid).value; 
} 
function G(objid){ 
  return document.getElementById(objid); 
} 
</script> 
</head> 
<body onLoad="keyUp();"> 
<div> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="position:relative"> 
 <tr> 
  <td width="55%"> 
  <div id="ol"><textarea cols="2" rows="10" id="li" disabled></textarea></div> 
  <textarea name="co" cols="60" rows="10" wrap="off" id="c2" onblur="check('2')" onKeyUp="keyUp()" onFocus="clearValue('2')" onscroll="G('li').scrollTop=this.scrollTop;" oncontextmenu="return false" class="grey">请在这里粘入多段字看一看。 
</textarea>   
  </td> 
  </tr> 
</table> 
</div> 
<em class="block" id="msg2">文本框没有内容。</em> 
<script type="text/javascript"> 
var msgA=["msg1","msg2","msg3","msg4"]; 
var c=["c1","c2","c3","c4"]; 
var slen=[50,20000,20000,60];//允许最大字数 
var num="";
var isfirst=[0,0,0,0,0,0]; 
function isEmpty(strVal){ 
 if( strVal=="" ) 
 return true; 
 else 
 return false; 
} 
function isBlank(testVal){  
  var regVal=/^\s*$/; 
  return (regVal.test(testVal)) 
} 
function chLen(strVal){ 
 strValstrVal=strVal.trim2(); 
 var cArr=strVal.match(/[^\x00-\xff]/ig); 
  return strVal.length+(cArr==null ? 0 : cArr.length);  
} 
function check(i){ 
 var iValue=F("c"+i); 
 var iObj=G("msg"+i); 
 var n=(chLen(iValue)>slen[i-1]); 
 if((isBlank(iValue)==true)||(isEmpty(iValue)==true)||n==true){  
 iObj.style.display ="block"; 
 }else{  
 iObj.style.display ="none"; 
 } 
} 
function checkAll(){ 
 for(var i=0;i<msgA.length;i++){ 
 check(i+1); 
 if(G(msgA[i]).style.display=="none"){ 
  continue; 
 }else{ 
  alert("填写错误,请查看提示信息!"); 
  return; 
 } 
 } 
 G("form1").submit(); 
} 
function clearValue(i){ 
 G(c[i-1]).style.color="#000"; 
 keyUp(); 
 if(isfirst[i]==0){ 
 G(c[i-1]).value=""; 
 } 
 isfirst[i]=1; 
} 
function keyUp(){ 
 var obj=G("c2"); 
 var str=obj.value; 
 strstr=str.replace(/\r/gi,""); 
 strstr=str.split("\n"); 
 n=str.length; 
 line(n); 
} 
function line(n){ 
 var lineobj=G("li"); 
 for(var i=1;i<=n;i++){ 
 if(document.all){ 
  num+=i+"\r\n"; 
 }else{ 
  num+=i+"\n"; 
 } 
 } 
 lineobj.value=num; 
 num=""; 
} 
function autoScroll(){ 
 var nV=0; 
 if(!document.all){ 
 nV=G("c2").scrollTop; 
 G("li").scrollTop=nV; 
 setTimeout("autoScroll()",20); 
 } 
} 
if(!document.all){ 
window.addEventListener("load",autoScroll,false); 
} 
</script> 
</body> 
</html>

以上就是javascript如何实现行号显示的文本框效果的源代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
javascript打开word文档的方法
Apr 16 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
vue实现五子棋游戏
May 28 Javascript
js实现查询商品案例
Jul 22 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 #Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 #Javascript
javascript跨域的方法汇总
Oct 23 #Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 #Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 #Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 #Javascript
深入浅析javascript立即执行函数
Oct 23 #Javascript
You might like
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Numpy之random函数使用学习
2019/01/29 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
贺卡寄语大全
2014/04/11 职场文书
大学生求职信例文
2014/06/29 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
地震捐款简报
2015/07/21 职场文书
员工规章制度范本
2015/08/07 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android