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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JS打印组合功能
Aug 04 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
angular实现input输入监听的示例
Aug 31 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
详释JavaScript执行环境与执行栈
Apr 02 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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
工艺工程师岗位职责
2014/03/04 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
经理聘任证明
2015/03/02 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
小学作文之描写天气
2019/08/15 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python