Jquery 限制文本框输入字数

关注

转载最新推荐文章于 2026-04-10 15:54:16 发布 8.4k 阅读 AI 写同款· GEO 优化 ›

jQuery插件：文本框字数限制功能的实现在本文中，我们将介绍如何使用jQuery编写一个实用的插件，用于限制文本框中输入的字符数量。现在，让我们来实现插件的功能。在插件的实现代码中，我们将使用输入事件来监听文本框中的输入，并根据最大字符数来更新剩余字符数量的显示。通过这个插件，我们可以轻松地为文本框添加字数限制，并提供实时的字符统计。在上述代码中，我们首先将文本框和剩余字符数量的显示元素保存到变量中。现在，当用户在文本框中输入时，剩余字符数量将实时更新，并显示在文本框下方。事件监听文本框的输入，并根据输入的字符数更新剩余字符数量的显示。阅读详情

  <div class="right">
                        <p>
                            <textarea id="caseContent" name="caseContent" maxlength="200" class="area"></textarea>
                        </p>
                        <p>
                            <input type="submit" value="提交评论" class="sub_bt">
                            <script type="text/javascript">
                                $(function () {
                                    //匹配包含给定属性的元素，keyup在按键释放时发生
                                    $("#caseContent").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的文本重新赋值 
                                            }

                                            var yishu = area.val().length;
                                            var sheng = max - area.val().length;
                                            $("#lyishu").html(yishu);
                                            $("#lsheng").html(sheng);
                                        }
                                    });
                                    $("#caseContent").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的文本重新赋值 
                                            }

                                            var yishu = area.val().length;
                                            var sheng = max - area.val().length;
                                            $("#lyishu").html(yishu);
                                            $("#lsheng").html(sheng);
                                        }
                                    });


                                }); 
                            
                            </script>
                            已输入 <label id="lyishu" >0</label>  个字符，还可输入 <label id="lsheng" >200</label> 个字符</p>
                    </div>

收录于