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

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

1. 需求

  • 限制文本域的输入字数
  • 能够看到还可输入字数和超出字数
  • 如果超出字数禁止提交
  • 将中文视为一个字符,将英文视为半个字符,也就是两个英文字符按一个字符计算。
        JavaScript 控制textarea(文本域)的输入字数_第1张图片

2. 思路

  • 文本框获得焦点时启动定时器,计算文本框的字数,判断里面的字符是否为空,从而改变按钮的显示状态和文字的个数
  • 将一个中文字符转换成两个字符计算,一个英文字符按一个英文字符计算,然后在显示已经输入字符数中除以2,记住向上去整(parseInt方法),不然就出现0.5个字符了

3. 代码


<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>100em>个字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="已超出" +parseInt((newvalue.length - num)/2) +"个字!";
                        objTip.style.color="#F00";
                        document.getElementById("button").disabled="disabled";
                    }else{
                        objTip.innerHTML="你还能输入" +parseInt((num-newvalue.length)/2) +"个字!";
                        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>

你可能感兴趣的:(JavaScript)