我有一个代码,当用户输入
文本输入
时,该代码应该更新剩余的字符数。该代码是使用keypress
事件触发的。问题是代码仅在2按键
之后触发。为什么会出现这种情况?我有一个代码可以显示 ASCII 代码的键,但该字符始终显示 8 并在按 退格 时显示。以及如何使用
String.fromCharCode(event.keycode} ;
方法。为什么要向
函数
添加事件
参数?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()
最佳答案
keypress
事件在输入值更新之前触发,这就是计数器不是最新的原因。如果您不需要 keyCode,我建议您监听input
事件。您还可以收听keyup
(但更新不会直接进行)或keypress
和keyup
的组合(来自“How to get text of an input text box during onKeyPress? ” ,我更新了正确答案fiddle)。- 实际上,当您按退格键时,
keypress
事件似乎不会被触发。话虽如此,忽略“静音”键(“backspace”、“shift”、“command”等)的另一种解决方案是监听“input”事件(但您无权访问事件.keyCode
)。否则,当 keyCode 不相关时,您也可以忽略您的代码。 - 对于 String.fromCharCode ,只需使用
String.fromCharCode(event.keyCode)
即可获取 keyCode 的“人类”等效值。
- 实际上,当您按退格键时,
- 传递给函数的 event 是一个对象,其中包含有关此给定事件的所有信息,包括按下的键。
关于Javascript 按键事件和 e.keycode,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29576916/