在Firefox中，event.keycode未返回正确的值

Question

我正在尝试以下代码，以便在输入框内按下 空格键 时触发一个js方法。

  <input id="j1" /> 

  $('#j1').keypress (function (event){
       alert(event.keycode)
  });

在Firefox中，只有在按下enter键时才返回正确的值，其他键返回的值始终只是 0 。 在IE / Chrome中，这个功能完美运作。

- Rajat Gupta

Answer 1

在非IE浏览器中，你需要使用keypress事件的which或charCode属性，而不是keyCode属性。 keypress事件用于检测输入的字符，而keyup和keydown用于检测物理按键（在这些事件中，keyCode在所有主要浏览器中都有效）。

var charCode = (typeof event.which == "number") ? event.which : event.keyCode;

然而，jQuery使用类似以下代码的方式来规范化keypress事件的which属性，因此在jQuery中您只需要：

var charCode = event.which;

想要了解有关键事件的更多细节，请参阅http://unixpapa.com/js/key.html。

- Tim Down

Answer 2

问题在于不同的浏览器对按键的实现并不相同。解决方法是检查所有可能注册了 key 的地方，例如： event.keycode 和 event.which。

更多信息请参见此帖子：

jQuery事件Keypress：哪个键被按下？

编辑

最后找到了我的旧函数，这是我使用的实际代码：

evt = (evt) ? evt : event;
var charCode = evt.which || evt.charCode || evt.keyCode || 0;

- Rolando Cruz

---

在火狐浏览器中，对于“enter”，这将返回未定义。 - Rajat Gupta

是的，但是OP正在尝试捕捉空格键按下事件 =) - Rolando Cruz

谢谢指出。实际上是即兴打的 =) 经过编辑后应该可以工作了。 - Rolando Cruz

evt.which || evt.charCode || evt.keyCode || 0 的翻译是：事件对象的按键值，如果没有则返回0。 - Leonid

@Rolando，@SomeGuy：另外，根本不需要使用charCode。支持charCode的每个浏览器也都支持which，而一些浏览器（如Opera）只支持which。 - Tim Down

Answer 3

KeyboardEvent.keyCode：

keypress事件的值在不同的浏览器中是不同的。IE和Google Chrome设置KeyboardEvent.charCode的值。如果按下的键是可打印的键，Gecko将其设置为0，否则将其设置为与keydown或keyup事件相同的keyCode。

因此，从Firefox的角度来看，它实际上返回了正确的值。请参见文档。

keyCode、which、keyIdentifier和charCode已被弃用。

该功能已从Web标准中删除。尽管某些浏览器可能仍然支持它，但正在逐步停止使用。避免使用它，并在可能的情况下更新现有代码；

keyIdentifier在IE和Firefox中没有支持，已从Opera和Chrome中删除。
使用charCode是非标准的。

该功能是非标准的，不在标准跟踪中。请勿在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在较大的不兼容性。

那么有什么替代方案吗？

I. 使用key属性代替。

readonly attribute DOMString key

持有与按下的键相对应的关键属性值

示例: "a", "A", "@", "%", "$", "ا", "ب", "ة", "ت", ...，"١", "٢", "٣", "Tab", "Enter"，所有的 "F1"...

它已经获得了所有主要浏览器（Firefox 52、Chrome 55、Safari 10.1、Opera 46）的支持，除了具有非标准键标识符和AltGraph不正确行为的Internet Explorer 11。更多信息 如果这很重要和/或向后兼容性，则可以使用以下代码中的功能检测。

请注意，key值与keyCode或which属性不同，因为它包含键的名称而不是其代码。如果您的程序需要字符代码，则可以使用charCodeAt()。 对于单个可打印字符，您可以使用charCodeAt()，如果您正在处理其值包含多个字符的键，例如ArrowUp，则有可能：您正在测试特殊键并相应地采取行动。因此，请尝试实现一个包含键值及其相应代码的表格charCodeArr["ArrowUp"]=38，charCodeArr["Enter"]=13，charCodeArr[Escape]=27等等，请参见键值及其相应代码。

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */  

II. 您也可以使用 code 属性:

readonly attribute DOMString code

“code”属性保存了被按下的物理按键的标识符。该值不受当前键盘布局或修饰键状态的影响，因此特定的按键始终返回相同的值。它与“key”属性具有类似的效果，并且在使用QUERTY布局的美国键盘上按下W按钮时会输出“keyW”。如果在另一个布局（AZERTY）或另一种语言（希伯来语）中按下相同的按钮或与修改器（shift）组合，则“key”属性将相应更改，而“code”属性仍将具有相同的值“keyW”，更多信息请参见这里。Chrome 49、Firefox 52、Safari 10.1和Opera 46支持“code”属性，但Internet Explorer不支持。另请参见：

1. KeyboardEvent.charCode - 键盘事件中所按键的 Unicode 字符码。
2. KeyboardEvent.keyIdentifier - 已废弃，无需使用。请改为使用 key 属性。
3. KeyboardEvent.keyCode - 键盘事件中所按键的键码值。
4. KeyboardEvent.which - 键盘事件中所按键的键码值。
5. KeyboardEvent.key - 键盘事件中所按键的名称（字符串）。
6. key property support - 指示浏览器是否支持 KeyboardEvent 的 key 属性。
7. KeyboardEvent.code - 表示按键在键盘上的位置（而非按键的字符编码或键盘布局）。
8. code property support - 指示浏览器是否支持 KeyboardEvent 的 code 属性。

- user10089632

Answer 4

如果event.keyCode没有返回正确的值，那么对于Firefox浏览器，您可以使用event.charCode

var keyValue = event.charCode || event.keyCode;

- Jasmeen

Answer 5

如果您无论按哪个键都得到一个0，尝试使用charCode而不是keyCode。这是因为您正在调用使用which和charCode的KeyboardEvent对象，而不是使用keyCode返回键盘Unicode值的Event对象。有关更多信息，请参阅MDN Web Docs以了解有关KeyboardEvent的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent。

- Mado