字符计数器 - 退格不反映剩余的字符答案

【问题标题】：character counter - backspace doesn't reflect on characters remaining字符计数器 - 退格不反映剩余的字符
【发布时间】：2017-08-15 14:41:18
【问题描述】：

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

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

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

任何帮助将不胜感激！

【问题讨论】：

keypress -> keydown

标签： javascript html

【解决方案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>

【讨论】：

【解决方案2】：

使用keydown 事件而不是keypress。

【讨论】：

应该使用keyup，以防用户按住键。您希望它反映最新的值

【解决方案3】：

使用keyup 而不是keypress。当用户按下某物时，这将获取所有键码

jQuery: keyPress Backspace won't fire?

【讨论】：