编程爱好者之家

jquery实现输入框实时检测输入字符个数并且到了规定的字数禁止输入

2018-10-11 14:46:32 1132

今天要实现输入框输入字数多余150个字符就不能输入,并且实时查看剩余能输入的个数,用jquery做了下,代码如下

html代码:

<textarea  cols="10" rows="10"  id="accepted_answer"></textarea>
<h6 id="word">150</h6>

效果如下:

image.png


jquery代码如下

$(function(){
    $("#accepted_answer").keyup(function(){
        var len = $(this).val().length;
        if(len > 149){
            $(this).val($(this).val().substring(0,150));
            $("#word").text(0);
        }
        var num = 150 - len;

        if(num<0){
            $("#word").text(0);
        }else{
            $("#word").text(num);
        }
    });
})

实现效果图如下

image.png

同类文章