jQuery实时计算用户输入字数

  • 时间:
  • 浏览:
  • 来源:互联网

这只是关键代码,是对自己学习的记录。

css部分

.textarea-block{position:relative;margin-top:3rem;}
.textarea-item{width:100%;height:200px;border:1px solid #ccc;padding:10px;resize:none;color:#aaa;}
.textarea-count{position:absolute;bottom:10px;right:0;color:#000;}

HTML部分

<div class="textarea-block">
		<textarea class="textarea-item" name="content" placeholder="请输入内容,不超过300字。" maxlength="300" spellcheck="false"></textarea>
	     <div class="textarea-count">
	            <span class="textareaInput">0</span>/<span class="textareaTotal">300</span>'
	    </div>
</div>

jQuery部分

实时监听输入字数

var lenInput = $('.textarea-item').val().length;

        $(".textarea-item").keyup(function(){
            lenInput = $(this).val().length;
            if(lenInput>0 && lenInput<=300){
                $('.textareaInput').html(lenInput);
                $('.textarea-btn').attr('disabled',false);
            }else{
                $('.textarea-btn').attr('disabled',true);
            }
        });

本文链接http://www.dzjqx.cn/news/show-617272.html