利用jq实现在文本框中限制用户输入字数,并给出提示(即监听用户输入的字数,更新在页面中)
html:
<h3>
<center>
实时计算用户输入字数
</center>
</h3>
<div class='textarea-wrapper'>
<div class='textarea-block'>
<textarea class="textarea-item" name="content" placeholder="请输入内容,不超过50字。" maxlength="50" spellcheck="false"></textarea>
<div class="textarea-count"> <span class="textareaInput">0</span>/<span class="textareaTotal">50</span> </div>
</div>
<button class='textarea-btn' disabled="">提交</button>
</div>
js:
<script src="./js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
var lenInput = $('.textarea-item').val().length;
$(".textarea-item").keyup(function() {
lenInput = $(this).val().length;
if (lenInput > 0 && lenInput <= 50) {
$('.textareaInput').html(lenInput);
$('.textarea-btn').attr('disabled', false);
} else {
$('.textarea-btn').attr('disabled', true);
}
if (lenInput == 0) {
$('.textareaInput').html(lenInput);
}
});
});
</script>
该方法借鉴了社区中相关帖子的思想,并作出优化