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

Question

当我按下 . 时，它会触发三个事件：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，即 3/4。在keypress 上，我得到了正确的值，但是当我按delete 时，不会触发此事件。

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

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

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

Answer 1

我认为最好的解决方案是映射您想要的键（demo），然后使用 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)) );
});

这与 jQuery UI 使用 - 查看文件顶部的键码交叉引用？这也是我在 keycaster 插件中使用的方法。

Answer 2

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

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

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

Answer 3

我强制执行与 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" +
     "");
}

Answer 4

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

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

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