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 相关文章推荐
基于jquery的监控数据是否发生改变
Apr 11 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
js命名空间写法示例
Dec 18 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
js实现搜索栏效果
Nov 16 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输出xml必须header的解决方法
2014/10/17 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
tensorboard显示空白的解决
2020/02/15 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
python之随机数函数的实现示例
2020/12/30 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
市场营销管理毕业生自荐信
2014/03/03 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书