當用戶在 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 ，即¾ 。 在keypress上我得到正確的值，但是當我按下delete時不會觸發這個事件。

當我按下delete時，我在keydown和keyup上得到代碼46 。 但是代碼46是. 而不是delete 。

如果是. 按下或delete鍵？

要測試的頁面： http://jsfiddle.net/Eg9F3/

Answer 1

我認為最好的解決方案是 map 您想要的鍵（演示），然后使用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

事實上，這很奇怪，但這是邏輯。

function 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”的含義不同。 其中，它是鍵盤上鍵的鍵碼，而不是字符序數。 在“按鍵”中，它是角色，但您沒有得到Del的“按鍵”（正如您所注意到的）。

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

您可能應該使用“keydown”或“keyup”並檢查鍵碼。