当前位置:Web前端 > javascript> 正文

js统计文本框剩余可输入字数

时间:2014-7-27类别:Web前端

js统计文本框剩余可输入字数

js统计文本框剩余可输入字数

有些需求是为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,并且有些特殊的要求字数不超过多少

 

实现方式

 

  •  
  • HTML 代码   复制
  • 
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
     
            var maxstrlen = 160;
            function Q(s) { return document.getElementById(s); }
     
            function checkWord(c) {
                len = maxstrlen;
                var str = c.value;
                myLen = getStrleng(str);
                var wck = Q("wordCheck");
     
                if (myLen > len * 2) {
                    c.value = str.substring(0, i + 1);
                }
                else {
                    wck.innerHTML = Math.floor((len * 2 - myLen) / 2);
                }
            }
     
            function getStrleng(str) {
                myLen = 0;
                i = 0;
                for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
                    if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)
                        myLen++;
                    else
                        myLen += 2;
                }
                return myLen;
            }
        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <li style="font-size: 16px">
            控制输入框字符输入,计算输入字符总数,显示剩余字数;<br>
            一个英文字符算一个字符,一个中文字符算两个字符计算。
        </li>
        <li>
            <textarea onkeyup="javascript:checkWord(this);" onmousedown="javascript:checkWord(this);"
                name="content" style="overflow-y: scroll"></textarea>
        </li>
        <li>
            还可以输入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">160</span>个字符
        </li>
        </form>
    </body>
    </html>
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐