Javascript 按键事件和 e.keycode

Question

1. 我有一个代码，当用户输入文本输入时，该代码应该更新剩余的字符数。该代码是使用 keypress 事件触发的。问题是代码仅在2按键之后触发。为什么会出现这种情况？

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

3. 为什么要向函数添加事件参数？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 事件似乎不会被触发。话虽如此，忽略“静音”键(“backspace”、“shift”、“command”等)的另一种解决方案是监听“input”事件(但您无权访问 事件.keyCode)。否则，当 keyCode 不相关时，您也可以忽略您的代码。
   • 对于 String.fromCharCode ，只需使用 String.fromCharCode(event.keyCode) 即可获取 keyCode 的“人类”等效值。
3. 传递给函数的 event 是一个对象，其中包含有关此给定事件的所有信息，包括按下的键。