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 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
详解JS函数防抖
Jun 05 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
Web应用开发TypeScript使用详解
May 25 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 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php设计模式之委托模式
2016/02/13 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
node.js中的console.time方法使用说明
2014/12/09 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
python读取Excel实例详解
2018/08/17 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Windows下安装Scrapy
2018/10/17 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python中的列表与元组的使用
2019/08/08 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python中有关时间日期格式转换问题
2019/12/25 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
特色冷饮店创业计划书
2014/01/28 职场文书
新闻稿件写作范文
2015/07/18 职场文书
Python Parser的用法
2021/05/12 Python
python数据处理之Pandas类型转换
2022/04/28 Python