javascript - 字符计数器 - 退格键不反射(reflect)剩余字符

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");
});

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

如有任何帮助，我们将不胜感激!

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>