美文网首页
文本框显示行号

文本框显示行号

作者: flamez57 | 来源:发表于2020-03-24 21:59 被阅读0次

<style>

    /*文本框显示行号*/

    #msg1,#msg2,#msg3,#msg4{display:none}

    #ol{position:absolute;top:17px;left:17px;height:205px;z-index:1;padding:0;margin:0;border:0;background:#ecf0f5;width:23px;text-align:left;resize:none;opacity:0.5;}

    #li{background:#ecf0f5;height:199px;overflow:hidden;width:32px;border:none;line-height:20px;margin:0;padding-top:13px;text-align:center;resize:none;}

    .texts{float:left;width:566px;height:200px;line-height:20px;font:18px Courier New,​sans-serif;border:5px solid #f18200;border-radius:2px;resize:none;padding:5px 0 0 45px;margin:12px;overflow:auto;}

</style>

<div class="search">

    <div id="ol">

        <textarea id="li" cols="2" rows="10" disabled></textarea>

    </div>

    <textarea id="c2" name="co" class="texts" cols="40" rows="3" wrap="off" onblur="check('2')" onkeyup="keyUp()" onFocus="clearValue('2')" onscroll="G('li').scrollTop = this.scrollTop;" oncontextmenu="return false" placeholder="Do something"></textarea>

</div>

<script src="https://flamez57.github.io/carousel/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    /*文本框显示行号*/

    //利用Javascript中每个对象(Object)的prototype属性我们可以为Javascript中的内置对象添加我们自己的方法和属性。

    //为String对象增加一个trim方法

    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);

    }

    /*文本框显示行号*/

    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){

        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>

相关文章

  • 文本框显示行号

    /*文本框显示行号*/#msg1,#msg2,#msg3,#msg4{display:none}#ol{posit...

  • vim显示行号-临时显示+永久显示

    --临时显示行号 --永久显示行号

  • linux命令

    linux中 vi / vim显示行号或取消行号命令 显示行号:set number或者:set nu 取消行号显...

  • Vim如何显示行号

    临时显示某行的行号 在底线命令模式下输入 终端最底部显示结果 临时显示所有的行号 显示结果 永久显示所有行号 /e...

  • Linux常用命令

    ## cat [option] filename默认显示内容到标准输出 -n 显示行号 -b 显示行号,忽略空...

  • Vim小技巧

    1:显示行号 显示当前行号是第几行的方法有很多种,可以通过为文档添加行号来实现,添加行号的方法是在命令模式下输入:...

  • Shell 脚本攻略-命令行之乐

    Cat -n 会显示行号;-b 也会显示行号,但不计空格 find 基本用法:find path -name "f...

  • 《转》如何利用 Visual Studio 自带工具提高开发效率

    显示行号 有些时候(比如错误定位)的时候,显示行号将有利于我们进行快速定位。 如何显示 1. 工具 / 选项 / ...

  • vim显示行号

    当我们使用vim打开文件时,默认是不显示行号的,然后有很多的命令,需要使用到行号,这个时候有两种解决方案,一种是一...

  • Vim显示行号

    前提 系统版本 :centos6 写代码不显示行号是很痛苦的一件事情,特别是出来问题要定位到具体出错的地方,肉眼去...

网友评论

      本文标题:文本框显示行号

      本文链接:https://www.haomeiwen.com/subject/gjdlqhtx.html