JS实现显示行号的文本框效果,兼容ie、火狐等浏览器

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

显示行号的文本框效果,兼容ie、火狐等浏览器

以下是该效果的源码:

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
  4. <title>显示行号的文本框效果,兼容ie、火狐等浏览器</title> 
  5. <style type="text/css"> 
  6. #main{color:#666} 
  7. textarea{border:1px solid #7f9db9;font-size:9pt;width:430px;color:#000} 
  8. .grey{color:#999} 
  9. #msg1,#msg2,#msg3,#msg4{ display:none} 
  10. #ol{position:absolute;z-index:1;padding:0px;margin:0px;border:0px;background:#ecf0f5;width:23px;text-align:left; } 
  11. #li{background:#ecf0f5;height:160px;overflow:hidden;width:32px;border-right:0;line-height:20px;margin:0px;padding:0px;text-align:center} 
  12. #c2{font-family:Arial, Helvetica, sans-serif;height:160px; margin:0px; width:416px;padding:0 0 0 35px;overflow-x: hidden;line-height:20px;} 
  13. </style> 
  14. <script type="text/javascript"> 
  15. String.prototype.trim2=function(){ 
  16.     return this.replace(/(^\s*)|(\s*$)/g, ""); 
  17. function F(objid){ 
  18.     return document.getElementById(objid).value; 
  19. function G(objid){ 
  20.     return document.getElementById(objid); 
  21. </script> 
  22. </head> 
  23. <body onLoad="keyUp();"> 
  24. <div> 
  25. <table width="100%" border="0" cellspacing="0" cellpadding="0" style="position:relative"> 
  26.   <tr> 
  27.     <td width="55%"> 
  28.     <div id="ol"><textarea cols="2" rows="10" id="li" disabled></textarea></div> 
  29.     <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">请在这里粘入多段字看一看。 
  30. </textarea>     
  31.     </td> 
  32.     </tr> 
  33. </table> 
  34. </div> 
  35. <em class="block" id="msg2">文本框没有内容。</em> 
  36. <script type="text/javascript"> 
  37. var msgA=["msg1","msg2","msg3","msg4"]; 
  38. var c=["c1","c2","c3","c4"]; 
  39. var slen=[50,20000,20000,60];//允许最大字数 
  40. var num="";//http://www.phpernote.com/javascript-function/752.html 
  41. var isfirst=[0,0,0,0,0,0]; 
  42. function isEmpty(strVal){ 
  43.  if( strVal=="" ) 
  44.   return true; 
  45.  else 
  46.   return false; 
  47. function isBlank(testVal){   
  48.     var regVal=/^\s*$/; 
  49.     return (regVal.test(testVal)) 
  50. function chLen(strVal){ 
  51.  strValstrVal=strVal.trim2(); 
  52.  var cArr=strVal.match(/[^\x00-\xff]/ig); 
  53.     return strVal.length+(cArr==null ? 0 : cArr.length);    
  54. function check(i){ 
  55.  var iValue=F("c"+i); 
  56.  var iObj=G("msg"+i); 
  57.  var n=(chLen(iValue)>slen[i-1]); 
  58.  if((isBlank(iValue)==true)||(isEmpty(iValue)==true)||n==true){   
  59.   iObj.style.display ="block"
  60.  }else{   
  61.   iObj.style.display ="none"
  62.  } 
  63. function checkAll(){ 
  64.  for(var i=0;i<msgA.length;i++){ 
  65.   check(i+1);  
  66.   if(G(msgA[i]).style.display=="none"){ 
  67.    continue; 
  68.   }else{ 
  69.    alert("填写错误,请查看提示信息!"); 
  70.    return; 
  71.   } 
  72.  } 
  73.  G("form1").submit(); 
  74. function clearValue(i){ 
  75.  G(c[i-1]).style.color="#000"
  76.  keyUp(); 
  77.  if(isfirst[i]==0){ 
  78.   G(c[i-1]).value=""
  79.  } 
  80.  isfirst[i]=1; 
  81. function keyUp(){ 
  82.  var obj=G("c2"); 
  83.  var str=obj.value; 
  84.  strstr=str.replace(/\r/gi,""); 
  85.  strstr=str.split("\n"); 
  86.  n=str.length; 
  87.  line(n); 
  88. function line(n){ 
  89.  var lineobj=G("li"); 
  90.  for(var i=1;i<=n;i++){ 
  91.   if(document.all){ 
  92.    num+=i+"\r\n"; 
  93.   }else{ 
  94.    num+=i+"\n"; 
  95.   } 
  96.  } 
  97.  lineobj.value=num
  98.  num=""
  99. function autoScroll(){ 
  100.  var nV=0
  101.  if(!document.all){ 
  102.   nV=G("c2").scrollTop; 
  103.   G("li").scrollTop=nV
  104.   setTimeout("autoScroll()",20); 
  105.  }  
  106. if(!document.all){ 
  107. window.addEventListener("load",autoScroll,false); 
  108. </script> 
  109. </body> 
  110. </html> 

转载请注明:代码家园 » JS实现显示行号的文本框效果,兼容ie、火狐等浏览器

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)