通过js控制输入的字数
2017-08-18 14:26
295 查看
有两种控制字数的形式,一种是一个字母、一个空格占两个字节,汉字占两个字节,一种是一个字母占一个位置,一个汉字也占两
个字节,下面写这两种的代码:
效果如下:
![](https://img-blog.csdn.net/20170818141539187?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhb3hpYW5nNjY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170818141627507?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhb3hpYW5nNjY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
效果如下:
![](https://img-blog.csdn.net/20170818142120214?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhb3hpYW5nNjY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170818142337511?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhb3hpYW5nNjY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
哪种形式的都有,我特意看了下新浪微博发微博的字数限制是第一种,不过也看实际的需求,要哪款自己选呗,哈哈!
个字节,下面写这两种的代码:
第一种形式的控制输入的字数代码:
<!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< 4000 /span> 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>
效果如下:
哪种形式的都有,我特意看了下新浪微博发微博的字数限制是第一种,不过也看实际的需求,要哪款自己选呗,哈哈!
相关文章推荐
- js对文本框输入的字数限制、通过复选框控制其他html控件的可用性
- js对文本框输入的字数限制、通过复选框控制其他html控件的可用性
- js 控制输入文字的字数
- JS控制文本框textarea输入字数限制的方法
- JS控制文本框textarea输入字数限制
- 通过js控制input文本框输入文本类型
- JS控制文本框textarea输入字数限制的方法
- JS控制文本框textarea输入字数限制
- js控制输入字数
- JS控制文本框textarea输入字数限制的方法
- js控制文本框字数,当超过限制字数时不能输入
- JS控制文本框textarea输入字数限制的方法
- [JSP&JS]用JS控制textarea的输入文字数(针对日文全角输入环境)
- iOS-UIkit复习和代理的使用实现文本框限制输入字数控制
- js控制文本框只能输入中文、英文、数字与指定特殊符号
- 通过js控制页面按钮的置灰与清零
- JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数
- JS 控制非法字符的输入代码
- UIWebView 通过JS控制页面视频播放
- js验证只能输入汉字 只能输入数字 只能输入英文和数字 控制输入框只能输入文字或数字。。。