当用户在 Chrome 上按下键盘时，如何检测“删除”和“。”？答案

【问题标题】：How to detect `delete` and `.` when user press the keyboard on Chrome?当用户在 Chrome 上按下键盘时，如何检测“删除”和“。”？
【发布时间】：2011-10-07 04:22:52
【问题描述】：

当我按下 . 时，它会触发三个事件，keydown、keypress 和 keyup。

keydown
  which: 190 == ¾
  keyCode: 190 == ¾

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

keyup
  which: 190 == ¾
  keyCode: 190 == ¾

当我按下 delete 时，它会触发两个事件，keydown 和 keyup。

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

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

我想按.，就能得到对应的字符（46 == .）。但是在keydown 和keyup 上，我得到190，即¾。在keypress 上，我得到了正确的值，但是当我按下delete 时不会触发此事件。

当我按下delete 时，我在keydown 和keyup 上得到代码46。但是代码46 是. 而不是delete。

如果按下的是. 或delete 键，我如何创建一个事件来捕获两个键并区分它们？

要测试的页面：http://jsfiddle.net/Eg9F3/

【问题讨论】：

你能用 jsfiddle.net 来说明一下吗？
@Christophe jsfiddle.net/Eg9F3
好吧，delete 不对应一个字符。在过去，它会映射到较低的字符值，但现在并不是这样。所以你这里有两个场景，需要区分它们。您要解决的实际问题是什么？

标签： javascript jquery events keyboard

【解决方案1】：

我认为最好的解决方案是映射您想要的键 (demo)，然后使用 e.which 交叉引用按下的键。有一个 good reference 的跨浏览器 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)) );
});

这类似于jQuery UI 使用的方法——看到文件顶部的键码交叉引用了吗？而且也是我在keycaster插件中使用的方法。

【讨论】：

【解决方案2】：

其实这很奇怪，但这是逻辑。

String.fromCharCode 函数使用的是真正的字符代码，而不是 KB 操作（左、删除...）

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

【讨论】：

【解决方案3】：

我强制执行与 Firefox 相同的行为，example on 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" +
     "");
}

【讨论】：

【解决方案4】：

“keypress”处理程序中“which”的值与“keydown”或“keyup”处理程序中的“which”的含义不同。其中，它是键盘上的键的 keycode，而不是字符序号。在“按键”中，它是字符，但您没有得到 Del 的“按键”（正如您所注意到的）。

因此，“keypress”处理程序（用于“.”）中的 46 与 Del 的“keydown”和“keyup”事件中的 46 不同。

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

【讨论】：