Javascript按键事件和e.keycode

Question

1. 我有一个代码，当用户输入text input 时，它会更新剩余字符数。代码使用keypress 事件触发。问题是代码仅在 2 keypress 之后触发。为什么会这样？

2. 我有一个代码来显示 ASCII 代码的键，但字符总是显示 8 并在我按 退格 时显示.以及如何使用String.fromCharCode(event.keycode} ;方法。

3. 为什么将 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. keypress 事件在输入值更新之前触发，这就是计数器不是最新的原因。如果您不需要 keyCode，我建议您收听 input 事件。你也可以听keyup（但更新不会直接）或keypress和keyup的组合（来自“How to get text of an input text box during onKeyPress?”，我更新了正确答案fiddle）。李>
2. • 实际上，按下退格键时似乎不会触发keypress 事件。话虽如此，忽略“静音”键（“退格”、“移位”、“命令”等）的另一种解决方案是监听“输入”事件（但您将无法访问 event.keyCode ）。否则，当 keyCode 不相关时，您也可以忽略您的代码。
   • 关于String.fromCharCode，只需使用String.fromCharCode(event.keyCode) 即可获得keyCode 的“人类”等效项。
3. 传递给函数的event 是一个对象，其中包含有关此给定事件的所有信息，包括按下的键。

Answer 2

1) 使用“keyup”代替“keypress”。

2) lastkey.textContent = 'ASCII码中的最后一个键：' + String.fromCharCode(e.keyCode);

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