Javascript按键事件和e.keycode

10 浏览
0 Comments

Javascript按键事件和e.keycode

我有一个代码，它应该在用户在文本输入框中输入时更新剩余字符数量。该代码由"keypress"事件触发。问题是，该代码只在输入两个"keypress"之后触发。为什么会这样呢？

我有一个代码，用来显示ASCII码的键，但字符总是显示为8，并且在按下退格键时显示。如何使用"String.fromCharCode(event.keyCode)"方法？

为什么要在函数中添加一个"event"参数？"e.keyCode"又是如何知道它显示的是用户输入的键码的呢？

代码示例

HTML

List King



  
My profile

  
  180 characters

JavaScript

var el;                                                    // 声明变量
function charCount(e) {                                    // 声明函数
  var textEntered, charDisplay, counter, lastkey;          // 声明变量
  textEntered = document.getElementById('message').value;  // 用户输入的文本
  charDisplay = document.getElementById('charactersLeft'); // 计数器元素
  counter = (180 - (textEntered.length));                  // 剩余字符数
  charDisplay.textContent = counter;                       // 显示剩余字符数
  lastkey = document.getElementById('lastKey');            // 获取最后一个使用的键
  lastkey.textContent = '最后一个键的ASCII码：' + e.keyCode; // 创建消息 
}
el = document.getElementById('message');                   // 获取消息元素
el.addEventListener('keypress', charCount, false);         // keypress - 调用charCount()

0

2 答案

0 Comments

Javascript的keypress事件和e.keyCode的问题出现的原因是在处理按键事件时，使用了错误的事件类型和属性。

解决方法如下：

1) 使用'keyup'代替'keypress'事件。

2) 使用lastkey.textContent = 'Last key in ASCII code: ' + String.fromCharCode(e.keyCode);来获取按键的ASCII码。

3) event参数被添加用于捕获触发的事件。它具有所有触发事件的属性，例如对于'keyup'事件，它具有'charcode'、'keycode'、'key'等属性。

使用'keyup'事件可以在释放按键时触发，因此计数器在按下键时不会更新。

0
0 Comments

Javascript的keypress事件和e.keycode问题的出现原因是keypress事件在输入的值更新之前触发，这就是为什么计数器没有更新的原因。建议如果不需要keyCode，可以监听input事件。也可以监听keyup事件（但更新不会直接），或者同时监听keypress事件和keyup事件。另外，可以忽略不相关的按键（如"backspace"、"shift"、"command"等）的解决方法是监听"input"事件（但无法访问event.keyCode），或者当keyCode不相关时忽略代码。使用String.fromCharCode(event.keyCode)可以获取keyCode的"人类"等价物。通过事件传递给函数的event对象包含所有关于该事件的信息，包括按下的键。

第一个问题并没有问题，它可以通过keyup事件解决。如果你有特殊的原因，请在你的代码中展示出来。在一个jsfiddle中复制并粘贴你的代码。打开控制台并在输入框中输入文本。你会发现，每次按下键时，keypress事件都会被触发。

我输入一个字符时它不会触发，下一个字符我输入时它会触发。我的意思是，我先输入一个字符，什么都不会发生，然后我再输入另一个字符（这样我就输入了2个字符），在我输入第二个字符后，事件会触发并显示（180-1个字符）而不是显示178个字符。

实际上，keypress事件在输入的值更新之前触发。如果不需要keyCode，建议监听"input"事件。否则，可以监听"keyup"事件，但更新不会直接。还有一个来自"How to get text of an input text box during onKeyPress?"的解决方法（我已经根据你的需求更新了这个fiddle）。

你的fiddle似乎按预期工作。当我按下"a"时，我看到"a"，当我按下"b"时，我看到"b"。请问你使用的是什么浏览器和版本？

最新版本的Mozilla Firefox。

0