jQuery's 'keypress' doesn't work for some keys in Chrome. How to work around?
JqueryGoogle ChromeKeypressJquery Problem Overview
I'm trying to implement key-press functionality which will remove a div when the user hits Esc
. This works for Firefox & IE with the following code:
$("body").keypress(function(e) {
alert("any key pressed");
if (e.keyCode == 27) {
alert("escape pressed");
}
});
If I hit any key, the first alert
is displayed, and if I hit Escape, the second alert
is also displayed.
This doesn't work with Chrome though. The first alert
is always displayed if I hit any of the letter keys, but not when I hit Escape, Tab, Space or any of the numbers.
Why would this be? Is there any way to get Chrome to respond to these key presses?
Jquery Solutions
Solution 1 - Jquery
Try handling keydown
instead.
Solution 2 - Jquery
use keydown. keypress doesn't work with ESC in Chrome (not sure about other browsers).
$(newTag).keydown(function(e) { //keypress did not work with ESC;
if (event.which == '13') {
ProfilePage.saveNewTag(search_id, $(newTag).val());
}
else if (window.event.which){
$(newTag).remove();
}
});
Solution 3 - Jquery
For ESC key:
$(document).keydown(function(e) {
if(e.keyCode == 27) { /* Run code */ }
}
For letter keys, like 'L':
$(document).keypress(function(e) {
if(e.which == 108) { }
});
Works in both Chrome and Firefox
Solution 4 - Jquery
After the second alert add also
e.preventDefault();
This will prevent the default action of the event to be triggered.
More info about this method here
Your code should look like
$("body").keypress(function(e) {
alert("any key pressed");
if (e.keyCode == 27) {
alert("escape pressed");
e.preventDefault();
}});
Solution 5 - Jquery
keypress 'ESC'
e.which: 0
e.keyCode: 27
keyup 'ESC'
e.which: 27
e.keyCode: 27
For non-printable characters better use keyup
.
Solution 6 - Jquery
Using Jquery.hotkey js file you can Make Sortcut key
$(document).bind('keydown', 'esc', function(){ });