通过js控制输入的字数

来源：互联网发布：比价软件推荐编辑：程序博客网时间：2024/05/16 17:26

有两种控制字数的形式，一种是一个字母、一个空格占两个字节，汉字占两个字节，一种是一个字母占一个位置，一个汉字也占两

个字节，下面写这两种的代码：

第一种形式的控制输入的字数代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        textarea{            width: 400px;            height:400px;            resize: none;        }        .limit{            width: 400px;            text-align: right;        }        #d1{            margin: 100px;        }    </style></head><body>    <div id = "d1">        <div>事件描述</div>        <div>            <textarea></textarea>        </div>        <div class="limit">            最大可输入            <span>0</span>/20        </div>    </div>    <script type="text/javascript">        //先定义计算字符串字数        function getStrleng(str,max) {             myLen = 0;            i = 0;            for (; (i < str.length) && (myLen <= max * 2); i++) {                if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)           //根据Unicode编码值判断是否汉字                    myLen++;                else                    myLen += 2;            }            return myLen;        }        //定义函数获得DOM元素        function Q(s){            return document.querySelector(s);        }        //定义函数显示写了几个字        function checkWord(c) {            var maxstrlen = 20;                var str = c.value;              //对象的内容            myLen = getStrleng(str,maxstrlen);   //计算str的字符个数            var wck = Q(".limit span");            console.log(wck)            if(myLen > maxstrlen * 2){                c.value = str.substring(0, i - 1);            }else{                wck.innerHTML = Math.floor(myLen / 2);            }         }        Q('textarea').onkeyup =function(){            checkWord(this);        }    </script></body></html>

效果如下：

这里写图片描述

第二种形式的控制输入的字数代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        textarea{            width: 400px;            height:400px;            resize: none;        }        .limit{            width: 400px;            text-align: right;        }        #d1{            margin: 100px;        }    </style></head><body>    <div id = "d1">        <div>事件描述</div>        <div>            <textarea></textarea>        </div>        <div class="limit">            最大可输入            <span>0</span>/20        </div>    </div>    <script type="text/javascript">        //先定义计算字符串字数        //定义函数获得DOM元素        function Q(s){            return document.querySelector(s);        }        function check(c){            var max = 20;            var span = Q('.limit span');            var length = c.value.length;            if(length <= max){                span.innerHTML = c.value.length;            }else{                c.value = c.value.slice(0,max);            }        }        Q('textarea').onkeyup =function(){            check(this);        }    </script></body></html>

效果如下：

这里写图片描述

哪种形式的都有，我特意看了下新浪微博发微博的字数限制是第一种，不过也看实际的需求，要哪款自己选呗，哈哈！

阅读全文

0 0