JavaScript 控制textarea(文本域)的输入字数
2016-07-11 01:50
381 查看
目录:
需求
思路
代码
能够看到还可输入字数和超出字数
如果超出字数禁止提交
将中文视为一个字符,将英文视为半个字符,也就是两个英文字符按一个字符计算。
将一个中文字符转换成两个字符计算,一个英文字符按一个英文字符计算,然后在显示已经输入字符数中除以2,记住向上去整(parseInt方法),不然就出现0.5个字符了
需求
思路
代码
1. 需求
限制文本域的输入字数能够看到还可输入字数和超出字数
如果超出字数禁止提交
将中文视为一个字符,将英文视为半个字符,也就是两个英文字符按一个字符计算。
2. 思路
文本框获得焦点时启动定时器,计算文本框的字数,判断里面的字符是否为空,从而改变按钮的显示状态和文字的个数将一个中文字符转换成两个字符计算,一个英文字符按一个英文字符计算,然后在显示已经输入字符数中除以2,记住向上去整(parseInt方法),不然就出现0.5个字符了
3. 代码
<!DOCTYPE html> <html> <head> <title>JS限制文本域输入字数</title> </head> <body> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <div id="tip" style=" color:#588905">你还能输入<em>100</em>个字</div> <textarea name="" cols="50" rows="10" id="textArea"></textarea><br /> <input type="submit" name="button" id="button" value="提交" /> <script> /** * 限制文本域的输入字数 * parameter:文本域对象、限制字数、字数显示对象 */ document.getElementById("textArea").focus(); var chackTextarea = function(obj,num,objTip){ setInterval(function(){ //启动定时器 var newvalue = obj.value.replace(/[^\x00-\xff]/g, "**"); //字符转换 if(newvalue.length>=0){ if (newvalue.length > num) { objTip.innerHTML="已超出<em>" +parseInt((newvalue.length - num)/2) +"</em>个字!"; objTip.style.color="#F00"; document.getElementById("button").disabled="disabled"; }else{ objTip.innerHTML="你还能输入<em>" +parseInt((num-newvalue.length)/2) +"</em>个字!"; objTip.style.color="#588905"; document.getElementById("button").disabled=""; } }else{ document.getElementById("button").disabled="disabled"; } },100) } chackTextarea(document.getElementById("textArea"),200,document.getElementById("tip")); </script> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解