• Reciprocity key to denuclearization process 2018-10-24
  • 拥有7.2亿美元比特币大金主突然苏醒 数字货币“吓跌” 2018-10-24
  • ::紫光阁::中共中央国家机关工作委员会 2018-10-23
  • 3名中国游客在瑞典遭粗暴对待 外交部敦促瑞方重视中方关切 2018-10-21
  • 国足20-0大胜!女梅西6球,女C罗轰5球,男足才赢19-0 2018-10-21
  • 消协提醒:春节预订酒店有技巧 预付卡消费需谨慎 2018-10-20
  • 陈敏尔唐良智会见传化集团董事长徐冠巨 2018-10-20
  • 扫黑除恶利剑高悬 前8月榕查处违法采砂案件93起 2018-10-20
  • 不能让所谓的收视率愚弄观众 2018-10-18
  • 新希望!中超19岁新星半年增重十斤 曾戏耍恒大两国脚 2018-10-17
  • 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • 显示行号的文本框效果,兼容ie、火狐等浏览器

    栏目: 编程语言 发布于: 2014-05-06 19:25:06

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

    以下是该效果的源码:

    <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="";//http://www.rocksun.cn/javascript-function/752.html
    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){
     strVal=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;
     str=str.replace(/\r/gi,"");
     str=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>

    您可能感兴趣的文章

    • 鼠标移动到文字上出现浮层提示特效(兼容IE,火狐等所有浏览器)
    • JS判断滚动条是否停止滚动,兼容IE和火狐浏览器
    • jquery下拉菜单效果(超简洁实用,兼容IE和firefox等主流浏览器)
    • 如何设置DIV层显示在flash对象之上,兼容ie和firefox等浏览器
    • 右下角弹出广告 js,漂浮效果(兼容多浏览器)
    • 如何解决DIV层被Flash遮盖问题(兼容IE和火狐浏览器),如何使DIV层在FLASH上面显示
    • javascript判断鼠标左右键点击-兼容ie、firefox、chrome等各大主流浏览器
    • 网页背景音乐的设置方法,兼容所有浏览器
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:显示行号的文本框效果,兼容ie、火狐等浏览器
    IT技术书籍推荐:
    Java编程思想(第4版)
    Java编程思想(第4版)
    埃史尔 (作者), 陈昊鹏 (译者)
    《Java编程思想(第4版)》书共22章,包括操作符、控制执行流程、访问权限控制、复用类、多态、接口、通过异常处理错误、字符串、泛型、数组、容器深入研究、Iava’UO系统、枚举类型、并发以及图形化用户界面等内容。这些丰富的内容,包含了Java语言基础语法以及高级特性,适合各个层次的Java程序员阅读,同时也是高等院校讲授面向对象程序设计语言以及Java语言的绝佳教材和参考书。 从《Java编程思想(第4版)》一书获得的各项大奖以及来自世界各地的读者评论中,不难看出这是一本经典之作。本书的作者拥有多年教学经验,对c、c++以及Java语言都有独到、深入的见解,以通俗易懂及小而直接的示例解释了一个个晦涩抽象的概念。