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/
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.