Javascript 按键事件和 e.keycode

Question

我有一个代码，当用户输入 text input 时，它会更新 剩余字符数 。使用 keypress 事件触发代码。问题是代码仅在 2 keypress 之后触发。为什么会这样？
我有一个代码可以显示 ASCII 代码的键，但是字符总是显示 8 并且显示时我按 退格键。以及如何使用String.fromCharCode(event.keycode} ;方法。
为什么要将 event 参数添加到 function 中？ e.keycode 如何知道它正在显示 用户的 输入的 keycode。

代码示例

HTML

<div id="page">
  <h1>List King</h1>
  <form id="messageForm">
    <h2>My profile</h2>
    <textarea id="message"></textarea>
    <div id="charactersLeft">180 characters</div>
    <div id="lastKey"></div>
  </form>
</div>

JavaScript

var el;                                                    // Declare variables

function charCount(e) {                                    // Declare function
  var textEntered, charDisplay, counter, lastkey;          // Declare variables
  textEntered = document.getElementById('message').value;  // User's text
  charDisplay = document.getElementById('charactersLeft'); // Counter element
  counter = (180 - (textEntered.length));                  // Num of chars left
  charDisplay.textContent = counter;                       // Show chars left

  lastkey = document.getElementById('lastKey');            // Get last key used
  lastkey.textContent = 'Last key in ASCII code: ' + e.keyCode; // Create msg 
}

el = document.getElementById('message');                   // Get msg element
el.addEventListener('keypress', charCount, false);         // keypress -call charCount()

Answer 1

1) 使用 'keyup' 代替 'keypress'。

2) lastkey.textContent = 'Last key in ASCII code: ' + String.fromCharCode(e.keyCode);

3) 了解不多。添加事件参数以捕获触发的事件。它具有触发事件的所有属性，例如 'keyup' 它具有 'charcode'、keycode'、'key' 等

Answer 2

keypress 事件在输入值更新之前触发，这就是计数器不是最新的原因。如果您不需要 keyCode，我建议您收听 input 事件。您还可以收听 keyup（但不会直接更新）或 keypress 和 keyup 的组合（来自“How to get text of an input text box during onKeyPress?", I updated the right answer's fiddle”）。
- 实际上，keypress 事件似乎不会在您按退格键时触发。也就是说，另一种忽略 "muted" 键（"backspace"、"shift"、"command" 等）的解决方案是监听 "input" 事件（但是您将无法访问 event.keyCode）。否则，当 keyCode 不相关时，您也可以忽略您的代码。
- 关于 String.fromCharCode，只需使用 String.fromCharCode(event.keyCode) 即可获得 keyCode 的 "human" 等价物。
传递给函数的 event 是一个包含有关此给定事件的所有信息的对象，包括按下的键。

Javascript 按键事件和 e.keycode

Javascript keypress event and e.keycode

javascript

html

dom-events

keypress

keycode