美文网首页js
js统计输入框的字数

js统计输入框的字数

作者: 干炸里脊不如你 | 来源:发表于2019-06-19 10:42 被阅读0次
     <html>   
     <head>   
     <title>enter </title>   
     <meta charset="utf-8">
    
     <script language="javascript">   
    function keypress1() //text输入长度处理   
    {   
    var text1=document.getElementById("mytext1").value;   
    var len=0+text1.length;   
    var show="你还可以输入"+len+"个字";   
    document.getElementById("name").innerText=show;   
    }   
    function keypress2() //textarea输入长度处理   
    {   
    var text1=document.getElementById("myarea").value;   
    var len;//记录剩余字符串的长度   
    if(text1.length>=300)//textarea控件不能用maxlength属性,就通过这样显示输入字符数了   
    {   
    document.getElementById("myarea").value=text1.substr(0,300);   
    len=0;   
    alert("222")
    }   
    else   
    {   
    len=300-text1.length;   
    }   
    var show="你还可以输入"+len+"个字";   
    document.getElementById("pinglun").innerText=show;   
    }   
     </script>   
     </head>   
     <body>   
     <center>    
    <div style="text-align:left;">   
     <h3>昵称: </h3>   
     <input type="text" id="mytext1" maxlength=15 onKeyUp="keypress1()"/>   
     <font color="gray"> <label id="name">你输入12个字 </label> </font>   
    
     <h3>评论内容: </h3>  
    
     <textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onKeyUp="keypress2()" onblur="keypress2()"> </textarea>   
     <font color="gray"> <label id="pinglun">你还可以输入300个字 </label> </font>   
     <div>   
     </center>   
     </body>   
     </html>  
    

    相关文章

      网友评论

        本文标题:js统计输入框的字数

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