javascript - How to detect `delete` and `.` when user press the keyboard on Chrome? - Stack Overflow

admin管理员组

文章数量:1316654

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: /

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/Eg9F3/

• javascript
• jquery
• events
• keyboard

Share Improve this question Follow asked Jul 17, 2011 at 15:38 BrunoLMBrunoLM 100k8686 gold badges309309 silver badges461461 bronze badges 3

• Can you illustrate by a jsfiddle ? – ChristopheCVB Commented Jul 17, 2011 at 15:40
• @Christophe jsfiddle/Eg9F3 – BrunoLM Commented Jul 17, 2011 at 15:41
• Well, delete doesn't correspond to a character. In the olden days it would map to a low character value, but that's not really how it works now. So you have two scenarios here and need to distinguish them. What is the actual problem that you are trying to solve? – Lightness Races in Orbit Commented Jul 17, 2011 at 15:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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.

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 ?

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" +
     "");
}

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.

本文标签： javascriptHow to detect delete andwhen user press the keyboard on ChromeStack Overflow