Question

这是我拥有的字符计数器代码。它显示剩余的字符数。

HTML:
<textarea></textarea> <span id='remainingC'></span>

JS:
$('textarea').keypress(function(){

if(this.value.length > 300){
    return false;
}
$("#remainingC").html((300 - this.value.length)+ "/ 300");
});

但我有一个问题。当我退格时，显示的数字不反映，只有当我开始写时，计数器才会更新。

任何帮助将不胜感激！

Answer 1

问题是当使用退格时.keypress()不会触发。您应该使用input事件。此外，Math.max大大简化了剩余的字符计算。

如果您要对<textarea>中的字符数实施实际上限，您可以随时添加属性maxlength="300"。

$('textarea').on('input', function() {
  $('#remainingC').text(
    Math.max(0, 300 - this.value.length) + ' / 300'
  )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea maxlength="300"></textarea> <span id='remainingC'></span>

Answer 2

使用keydown事件代替keypress。

Answer 3

使用keyup代替keypress。当用户按下某些内容时，这将获取所有密钥代码

jQuery: keyPress Backspace won't fire?

字符计数器 - 退格键并不反映剩余的字符

3 个答案: