JavaScript 控制textarea(文本域)的输入字数

来源：互联网发布：汽车销量数据编辑：程序博客网时间：2024/04/30 22:48

目录：
1. 需求
2. 思路
3. 代码

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>

0 0