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

问题

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

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

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

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

When I press delete it fires two events, keydown and 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 keydown and keyup I get 190 which is ¾. On the keypress I get the correct value, but this event is not fired when I press delete.

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

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

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

回答1:

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

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 UI uses - see the keycodes cross-reference at the top of the file? And it is also the method I use in the keycaster plugin.

回答2:

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...)

Why don't filter by keyCode simply ?

回答3:

I've forced the same behavior as 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:

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 keycode for the key on the keyboard, and not a character ordinal. In "keypress" it is the character, but you don't get a "keypress" for Del (as you've noticed).

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

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

来源：https://stackoverflow.com/questions/6724895/how-to-detect-delete-and-when-user-press-the-keyboard-on-chrome

标签

javascript

jquery

events

keyboard