Jquery 限制TextArea或文本框中输入的文字字数 - 工作之路 - 郑德才博客

郑德才博客 ^{记录学习，记录工作，学习知识分享！}

Jquery 限制TextArea或文本框中输入的文字字数

input文本框限制字数，直接加maxlength，textarea就不一样

<html>
<head>
<title>JQuery为textarea添加maxlength=400</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

</head>
<body>
<textarea id="TextAreaID" style="width: 300px; height: 60px;" maxlength="400"></textarea>
<input id="InputID" type="text" maxlength="400" />
</body>
</html>

<script type="text/javascript">
    $(function () {
        //匹配包含给定属性的元素，keyup在按键释放时发生
        $("#TextAreaID").keyup(function () {
            var area = $(this);
            //parseInt 方法返回与保存在 numString 中的数字值相等的整数。如果 numString 的前缀不能解释为整数，则返回 NaN（而不是数字）。
            var max = parseInt(area.attr("maxlength"), 10); //获取maxlength的值转化为10进制，将输入到textarea的文本长度
            //这个判断可知max得到的是不是数字，设定的大小是多少
            if (max > 0) {
                if (area.val().length > max) { //textarea的文本长度大于maxlength
                    area.val(area.val().substr(0, max)); //截断textarea的文本重新赋值
                }
            }
        });
        $("#TextAreaID").blur(function () {
            var area = $(this);
            var max = parseInt(area.attr("maxlength"), 10); //获取maxlength的值
            if (max > 0) {
                if (area.val().length > max) { //textarea的文本长度大于maxlength
                    area.val(area.val().substr(0, max)); //截断textarea的文本重新赋值
                }
            }
        });
    });
</script>

如果要限定的是textarea的文本字符个数则只要改变上面脚本的 $("text[maxlength]") 为 $("textarea[maxlength]").