javascript 当用户在 Chrome 上按下键盘时如何检测“删除”和“.”?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6724895/
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-10-25 21:38:54  来源:igfitidea点击:

How to detect `delete` and `.` when user press the keyboard on Chrome?

javascriptjqueryeventskeyboard

提问by BrunoLM

When I press .it fires the three events, keydown, keypressand keyup.

当我按下.它时会触发三个事件,keydown,keypresskeyup

keydown
  which: 190 == ?
  keyCode: 190 == ?

keypress
  which: 46 == .
  keyCode: 46 == .

keyup
  which: 190 == ?
  keyCode: 190 == ?

When I press deleteit fires twoevents, keydownand keyup.

当我按下delete它时会触发两个事件,keydown并且keyup.

keydown
  which: 46 == .
  keyCode: 46 == .

keyup
  which: 46 == .
  keyCode: 46 == .

I want to press .and be able to get the corresponding character (46 == .). But on keydownand keyupI get 190which is ?. On the keypressI get the correct value, but this event is not fired when I press delete.

我想按下.并能够得到相应的字符 ( 46 == .)。但在keydownkeyup我得到的190?。在keypress我得到正确的值,但当我按下时不会触发此事件delete

When I press deleteI get the code 46on keydownand keyup. But the code 46is a .and not delete.

当我按delete我得到的代码46keydownkeyup。但代码46是 a.而不是delete

How can I make an event to capture both keys and tell the difference, if it was a .pressed or deletekey?

我如何制作一个事件来捕获两个键并区分它是.按下还是delete键?

Page to test: http://jsfiddle.net/Eg9F3/

测试页面:http: //jsfiddle.net/Eg9F3/

采纳答案by BrunoLM

I've forced the same behavior as Firefox, example on jsFiddle

我强迫了与 Firefox 相同的行为,例如 jsFiddle

$("textarea").keydown(function(e) {
    // if the key pressed was found on the list of specialChars
    if (specialChars[e.keyCode])
    {
        // triggers the fake event
        $("textarea").trigger("chromekeypress", e);

        // temporary avoid keypress from firing
        $("textarea").unbind("keypress");
        setTimeout(function(){ $("textarea").bind("keypress", handleKey); },10);
    }
});

$("textarea").keypress(handleKey); // main event

$("textarea").bind("chromekeypress", chromeKeyPress); // chrome workaround

function chromeKeyPress(i,e){
    e.type="chromekeypress";
    e.which = 0; // copy Firefox behavior, which == 0 means a special key pressed
    handleKey(e); // fires the main event
}
function handleKey(e) {

    // which is going to be 0 if it is a special key
    // and keycode will have the code of the special key
    // or
    // which will have the value of the key

    $("#r").html($("#r").html() + "\n" +
        e.type + "\n" +
        "  which: " + e.which + " == " + String.fromCharCode(e.which) + "\n" +
        "  keyCode: " + e.keyCode + " == " + String.fromCharCode(e.keyCode) + "\n" +
     "");
}

回答by Mottie

I think the best solution would be to map the keys you want (demo), then use e.whichto cross-reference what key was pressed. There is a good referenceof cross-browser keyCodevalues, which work in this case because jQuery normalizes the e.whichvalue.

我认为最好的解决方案是映射您想要的键(演示),然后用于e.which交叉引用按下的键。有一个很好的跨浏览器keyCode参考,在这种情况下有效,因为 jQuery 对e.which值进行了规范化。

var keys = {
  46  : 'del',
  190 : '.'
};

$("textarea").bind('keyup', function(e){
  $('#r').append( 'keyup (' + e.which + '): ' + (keys[e.which] || String.fromCharCode(e.which)) );
});

This is similar to the method that jQuery UIuses - see the keycodes cross-reference at the top of the file? And it is also the method I use in the keycasterplugin.

这类似于jQuery UI使用的方法- 请参阅文件顶部的键码交叉引用?这也是我在keycaster插件中使用的方法。

回答by ChristopheCVB

In fact it's strange but it is logic.

事实上,这很奇怪,但这是逻辑。

The function String.fromCharCode is working with real char code, not with KB actions (left, delete...)

函数 String.fromCharCode 使用真正的字符代码,而不是 KB 操作(左,删除...)

Why don't filter by keyCode simply ?

为什么不简单地按 keyCode 过滤?

回答by Pointy

The value of "which" in a "keypress" handler does not have the same meaning as that of "which" in a "keydown" or "keyup" handler. In those, it's the keycodefor the key on the keyboard, and nota character ordinal. In "keypress" it is the character, but you don't get a "keypress" for Del(as you've noticed).

“keypress”处理程序中“which”的值与“keydown”或“keyup”处理程序中“which”的含义不同。在那些中,它是键盘上键的键,而不是字符序数。在“按键”中,它是字符,但您没有得到“按键” Del(正如您所注意到的)。

Thus, that's a different 46 in the "keypress" handler (for ".") than in the "keydown" and "keyup" events for Del.

因此,“keypress”处理程序(“.”)中的 46 与Del.

You probably should use either "keydown" or "keyup" and check for the keycode.

您可能应该使用“keydown”或“keyup”并检查键码。