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

最新推荐文章于 2024-06-18 23:00:00 发布

太阳的后裔

最新推荐文章于 2024-06-18 23:00:00 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_43942765/article/details/122924988

版权

js 专栏收录该内容

60 篇文章 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>" +Math.ceil((newvalue.length - num)/2) +"</em>个字!";
                        objTip.style.color="#F00";
                        document.getElementById("button").disabled="disabled";
                    }else{
                        objTip.innerHTML="你还能输入<em>" +Math.ceil((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>

小编是参考JavaScript 控制textarea(文本域)的输入字数这篇文章，不过该博文博主似乎因为粗心而将向上取整使用的是parseInt，parseInt只是取整数部分，向上取整是Math.ceil。

太阳的后裔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 控制textarea(文本域)的输入字数

<!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">你还能输入
复制链接

扫一扫

专栏目录