Javascript按键事件和e.keycode

Question

>

我有一个代码，当用户在文本输入中键入时，该代码将更新剩余的字符数。使用按键事件触发该代码。问题是只有在按下2键后才会触发代码。为什么会这样？

我有一个代码来显示ASCII码的键，但是当我按下backspace键时，字符总是显示为8。以及如何使用字符串。fromCharCode（event.keycode}；方法。

为什么将事件参数添加到函数？e.keycode如何知道它正在显示用户输入的keycode。

代码示例

超文本标记语言

<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='ASCII代码中的最后一个键：'String.fromCharCode（e.key代码）；

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

Answer 2

• 在输入值更新之前触发keypress事件，这就是为什么计数器不是最新的。如果不需要keyCode，我建议监听输入事件。您还可以收听keyup（但更新不会直接进行）或keypress和keyup的组合（来自如何在onKeyPress期间获取输入文本框的文本？，我更新了右答案是小提琴）。
• • 实际上，当您按下退格键时，keypress事件似乎没有被触发。也就是说，忽略静音键（退格、移位、命令等）的另一个解决方案是监听输入事件（但您无权访问event.keyCode）。否则，当keyCode不相关时，您也可以忽略您的代码。
  • 对于String.fromCharCode，只需使用String.fromCharCode（event.keyCode）来获得keyCode的"人类"等价物。