广
告

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言

    • 编程开发

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

    2018-04-03 22:12:38 次阅读 稿源：互联网
    零七广告

    利用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. } 
    18. function F(objid){ 
    19.     return document.getElementById(objid).value; 
    20. } 
    21. function G(objid){ 
    22.     return document.getElementById(objid); 
    23. } 
    24. </script> 
    25. </head> 
    26. <body onLoad="keyUp();"> 
    27. <div> 
    28. <table width="100%" border="0" cellspacing="0" cellpadding="0" style="position:relative"> 
    29.   <tr> 
    30.     <td width="55%"> 
    31.     <div id="ol"><textarea cols="2" rows="10" id="li" disabled></textarea></div> 
    32.     <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">请在这里粘入多段字看一看。 
    33. </textarea>     
    34.     </td> 
    35.     </tr> 
    36. </table> 
    37. </div> 
    38. <em class="block" id="msg2">文本框没有内容。</em> 
    39. <script type="text/javascript"> 
    40. var msgA=["msg1","msg2","msg3","msg4"]; 
    41. var c=["c1","c2","c3","c4"]; 
    42. var slen=[50,20000,20000,60];//允许最大字数 
    43. var num="";//http://www.phpernote.com/javascript-function/752.html 
    44. var isfirst=[0,0,0,0,0,0]; 
    45. function isEmpty(strVal){ 
    46.  if( strVal=="" ) 
    47.   return true; 
    48.  else 
    49.   return false; 
    50. } 
    51. function isBlank(testVal){   
    52.     var regVal=/^/s*$/; 
    53.     return (regVal.test(testVal)) 
    54. } 
    55. function chLen(strVal){ 
    56.  strValstrVal=strVal.trim2(); 
    57.  var cArr=strVal.match(/[^/x00-/xff]/ig); 
    58.     return strVal.length+(cArr==null ? 0 : cArr.length);    
    59. } 
    60. function check(i){ 
    61.  var iValue=F("c"+i); 
    62.  var iObj=G("msg"+i); 
    63.  var n=(chLen(iValue)>slen[i-1]); 
    64.  if((isBlank(iValue)==true)||(isEmpty(iValue)==true)||n==true){   
    65.   iObj.style.display ="block"; 
    66.  }else{   
    67.   iObj.style.display ="none"; 
    68.  } 
    69. } 
    70. function checkAll(){ 
    71.  for(var i=0;i<msgA.length;i++){ 
    72.   check(i+1);  
    73.   if(G(msgA[i]).style.display=="none"){ 
    74.    continue; 
    75.   }else{ 
    76.    alert("填写错误,请查看提示信息！"); 
    77.    return; 
    78.   } 
    79.  } 
    80.  G("form1").submit(); 
    81. } 
    82. function clearValue(i){ 
    83.  G(c[i-1]).style.color="#000"; 
    84.  keyUp(); 
    85.  if(isfirst[i]==0){ 
    86.   G(c[i-1]).value=""; 
    87.  } 
    88.  isfirst[i]=1; 
    89. } 
    90. function keyUp(){ 
    91.  var obj=G("c2"); 
    92.  var str=obj.value; 
    93.  strstr=str.replace(//r/gi,""); 
    94.  strstr=str.split("/n"); 
    95.  n=str.length; 
    96.  line(n); 
    97. } 
    98. function line(n){ 
    99.  var lineobj=G("li"); 
    100.  for(var i=1;i<=n;i++){ 
    101.   if(document.all){ 
    102.    num+=i+"/r/n"; 
    103.   }else{ 
    104.    num+=i+"/n"; 
    105.   } 
    106.  } 
    107.  lineobj.value=num; 
    108.  num=""; 
    109. } 
    110. function autoScroll(){ 
    111.  var nV=0; 
    112.  if(!document.all){ 
    113.   nV=G("c2").scrollTop; 
    114.   G("li").scrollTop=nV; 
    115.   setTimeout("autoScroll()",20); 
    116.  }  
    117. } 
    118. if(!document.all){ 
    119. window.addEventListener("load",autoScroll,false); 
    120. } 
    121. </script> 
    122. </body> 
    123. </html> 

    点赞
    收藏

    零七网部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告

    最新JavaScript

    零七广告

    热点JavaScript

    零七广告
    © 2018 零七网（WWW.07LA.COM）
    网站介绍 合作联系 寻求报道 投稿指南