Question

我已经看到使用keypress事件可以实现我想要的，但是它不能接受所有键盘键，例如backspace。

对于我想要的keyup，如果我按住该键将不起作用，因为当我停止按下该键时，它将触发事件。

keydown事件有一个奇怪的行为，有时当我单击它时，它不能正确触发该事件。

一个例子是：

document.getElementById("pencilDescription").addEventListener('keydown', () => {
  if (document.getElementById("pencilDescription").value.length > 150 && document.getElementById("pencilDescription").value.length < 210) {
    document.getElementById("charactersCount").style.color = "#f1c40f";
  } else if (document.getElementById("pencilDescription").value.length >= 210 && document.getElementById("pencilDescription").value.length <= 255) {
    document.getElementById("charactersCount").style.color = "#e64c3c";
  } else if (document.getElementById("pencilDescription").value.length > 255) {
    document.getElementById("charactersCount").style.color = "#95a5a6";
  } else {
    document.getElementById("charactersCount").style.color = "";
  }
  document.getElementById("charactersCount").innerHTML = 255 - document.getElementById("pencilDescription").value.length + " left";
})

<div style="display: flex">
  <input type="text" name="description" class="profile-description" id="pencilDescription">
  <div id="charactersCount" style="font-size: .8em; font-family: roboto; padding-left: 1em;">
  </div>
</div>
<div class="button" style="padding: .3em !important;">

应该显示输入形式中剩余的字符数，但是有时当我单击退格键时，仍然会减少输入字母时的剩余字符数，反之亦然。

在此示例中，如果键入一个字符，则显示254，如果将其退格，则将显示253左，其中255将是预期的输出，因为您将剩下更多的字符。如果您继续单击它，它将进行更新。

keypress事件不会发生，但问题是我之前提到的。

是什么原因导致这种现象以及如何解决？

Answer 1

我们可以检查表单元素的输入值。

function checkLength(length) {
  const el = document.querySelector("span.control");
  el.textContent = length + " left"
}

<form>
    <input type="text" oninput="checkLength(this.value.length)">
    <span class="control"></span>
</form>

Answer 2

感谢您的反馈！ @Heretic Monkey指出了input事件，它解决了我的问题。

按键事件奇怪的行为

2 个答案: