Question

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/

Answer 1

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