Javascript event.keycode 在 Firefox 中没有返回正确的值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7330724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 01:50:33  来源:igfitidea点击:

event.keycode not returning correct values in firefox

javascriptjqueryeventskeypresskeycode

提问by Rajat Gupta

I am trying the following code for triggering a js method when space-baris pressed within an input box.

我正在尝试使用以下代码space-bar在输入框中按下时触发 js 方法。

  <input id="j1" /> 

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

In firefox this returns correct value only when enteris pressed, values returned for other keys are just 0everytime. In IE/ chrome this works perfectly.

在 Firefox 中,这仅在enter按下时返回正确的值,其他键的返回值每次都为0。在 IE/chrome 中,这完美地工作。

回答by Tim Down

In non-IE browsers, you want the whichor charCodeproperty in a keypressevent rather than the keyCodeproperty. The keypressevent is for detecting typed characters while keyupand keydownare for detcting physical keys (in those events, keyCodeworks in every major browser).

在非 IE 浏览器中,您希望在事件中使用whichorcharCode属性keypress而不是keyCode属性。该keypress事件是检测输入的字符,而keyupkeydown针对detcting物理按键(这些事件中,keyCode在每一个主要的浏览器的工作原理)。

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

However, jQuery normalizes the whichproperty of keypress events by using code similar to this, so in jQuery you just need

但是,jQuerywhich通过使用与此类似的代码来规范按键事件的属性,因此在 jQuery 中您只需要

var charCode = event.which;

For (a lot) more detail about key events, see http://unixpapa.com/js/key.html.

有关关键事件的(更多)详细信息,请参阅http://unixpapa.com/js/key.html

回答by Rolando Cruz

The problem is not all browsers have the same implementations on keypresses. The solution would be to check all possible places where the keywas registered. In this case: event.keycodeand event.which

问题是并非所有浏览器在按键上都有相同的实现。解决方案是检查所有可能的key注册位置。在这种情况下:event.keycodeevent.which

See this post for more info

查看此帖子了解更多信息

jQuery Event Keypress: Which key was pressed?

jQuery 事件按键:按下了哪个键?

EDIT

编辑

Finally dug up my old functions, this is the actual code that I use:

终于挖出了我的旧函数,这是我使用的实际代码:

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

回答by Jasmeen

IF "event.keyCode"is not returning proper values then for firefox you can use " event.charCode"

如果“event.keyCode”没有返回正确的值,那么对于firefox你可以使用“ event.charCode”

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

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

回答by user10089632

KeyboardEvent.keyCode :

键盘事件.keyCode :

The value of keypress event is different between browsers. IE and Google Chrome set the KeyboardEvent.charCode value. Gecko sets 0 if the pressed key is a printable key, otherwise it sets the same keyCode as a keydown or keyup event

keypress 事件的值因浏览器而异。IE 和 Google Chrome 设置了 KeyboardEvent.charCode 值。如果按下的键是可打印的键,Gecko 设置 0,否则它设置与 keydown 或 keyup 事件相同的 keyCode

So from Firefox point of view, it has actually returned correct values. See the docs.

所以从 Firefox 的角度来看,它实际上返回了正确的值。请参阅文档

keyCode, which, keyIdentifierand charCodeare deprecated

keyCode, which,keyIdentifiercharCode已弃用

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible;

此功能已从 Web 标准中删除。虽然一些浏览器可能仍然支持它,但它正在被删除。尽可能避免使用它并更新现有代码;

keyIdentifierhad no support in IE and Firefox and been dropped from Opera and Chrome
WithcharCodeas Non-standard

keyIdentifier曾在IE和Firefox没有支持和Opera和Chrome的被丢弃
随着charCode非标

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations

此功能是非标准的,不在标准轨道上。不要在面向 Web 的生产站点上使用它:它不适用于每个用户。实现之间也可能存在很大的不兼容性

So what are the alternatives?

那么有哪些替代方案呢?

I. Use the keyproperty instead

一、改用key财产

readonly attribute DOMString key

Holds a key attribute value corresponding to the key pressed

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

Examples : "a", "A", "@", "%", "$", "?", "?", "?", "?", ..., "?", "?", "?", "Tab", "Enter" , all "F1"...`

示例:“a”、“A”、“@”、“%”、“$”、“?”、“?”、“?”、“?”、...、“?”、“?”、 "?", "Tab", "Enter" , 所有 "F1"...`

It has earned the support of all major browsers (Firefox 52, Chrome 55, Safari 10.1, Opera 46) except Internet Explorer 11 which has non-standard key identifiers and incorrect behavior with AltGraph. More info
If that is important and/or backward compatibility is, then you can use feature detection as in the following code :

它赢得了所有主要浏览器(Firefox 52、Chrome 55、Safari 10.1、Opera 46)的支持,但 Internet Explorer 11 具有非标准的密钥标识符和 AltGraph 的错误行为。更多信息
如果这很重要和/或向后兼容,那么您可以使用以下代码中的功能检测:

Notice that the keyvalue is different from keyCodeor whichproperties in that : it contains the name of the key not its code. If your program needs characters' codes then you can make use of charCodeAt(). For single printable characters you can use charCodeAt(), if you're dealing with keys whose values contains multiple characters like ArrowUpchances are : you are testing for special keys and take actions accordingly. So try implementing a table of keys' values and their corresponding codes charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13,charCodeArr[Escape]=27... and so on, please take a look at Key Valuesand their corresponding codes

请注意,该key值与keyCodewhich属性的不同之处在于:它包含键的名称而不是其代码。如果您的程序需要字符代码,那么您可以使用charCodeAt(). 对于可以使用的单个可打印字符charCodeAt(),如果您正在处理其值包含多个字符的键,例如ArrowUp:您正在测试特殊键并采取相应的措施。因此,尝试推行键的值的表和它们对应的代码charCodeArr["ArrowUp"]=38charCodeArr["Enter"]=13charCodeArr[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.You can also use the codeproperty :

II.您还可以使用该code属性:

readonly attribute DOMString code

Holds a string that identifies the physical key being pressed. The value is not affected by the current keyboard layout or modifier state, so a particular key will always return the same value.

保存一个字符串,用于标识被按下的物理键。该值不受当前键盘布局或修饰符状态的影响,因此特定键将始终返回相同的值。

It has a similar effect to the keyproperty and an output like "keyW"for button W pressed of a US keyboard with QUERTY layout. If the same button was pressed in another layout (AZERTY) or another language (Hebrew) or combined with a modifier (shift), keyproperty would change accordingly, while the codeproperty would still have the same value "keyW"more on this here.

它具有类似于key属性和输出的效果,例如"keyW"按下带有 QUERTY 布局的美式键盘的按钮 W。如果同一个按钮在另一个布局(AZERTY)或其他语言(希伯来语)或与改性剂(转移)按下,key属性将发生相应的变化,而code房地产仍然具有相同的价值"keyW"更多关于这个在这里

The codeproperty is supported in Chrome 49, Firefox 52, Safari 10.1 and Opera 46 But not in Internet Explorer.

codeChrome 49、Firefox 52、Safari 10.1 和 Opera 46 支持该属性,但 Internet Explorer 不支持。

see also :

也可以看看 :

  1. KeyboardEvent.charCode
  2. KeyboardEvent.keyIdentifier
  3. KeyboardEvent.keyCode
  4. KeyboardEvent.which
  5. KeyboardEvent.key
  6. key property support
  7. KeyboardEvent.code
  8. code property support
  1. 键盘事件.charCode
  2. 键盘事件.keyIdentifier
  3. 键盘事件.keyCode
  4. 键盘事件.which
  5. 键盘事件.key
  6. 关键资产支持
  7. 键盘事件.code
  8. 代码属性支持

回答by mado

if you're getting a 0no matter which key you press, try using charCodeinstead of keyCode

如果0无论按哪个键都得到一个,请尝试使用charCode而不是keyCode

This happens because you are calling the KeyboardEvent object which uses whichand charCodeas opposed to the Event object which uses keyCodefor returning keyboard Unicode values. For more information, refer to MDN web docs for more information regarding the KeyboardEvent: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

发生这种情况是因为您正在调用 KeyboardEvent 对象,该对象使用which并且charCodekeyCode用于返回键盘 Unicode 值的 Event 对象相反。有关更多信息,请参阅 MDN 网络文档以获取有关 KeyboardEvent 的更多信息:https: //developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent