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）使用＆＃39; keyup＆＃39;注意＆＃39;按键＆＃39;。

2）lastkey.textContent =＆＃39; ASCII码中的最后一个键：＆＃39; + String.fromCharCode（e.keyCode）;

3）不太了解它。添加事件参数以捕获已触发的事件。它具有被解雇事件的所有属性，例如＆＃39; keyup＆＃39;它有＆＃39; charcode＆＃39;，keycode＆＃39;，＆＃39; key＆＃39;等

Answer 2

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

Javascript按键事件和e.keycode

2 个答案: