jQuery's 'keypress' doesn't work for some keys in Chrome. How to work around?

JqueryGoogle ChromeKeypress

Jquery 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(){ });

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDaveDevView Question on Stackoverflow
Solution 1 - JquerySLaksView Answer on Stackoverflow
Solution 2 - JquerybearView Answer on Stackoverflow
Solution 3 - JqueryDylan ForeggerView Answer on Stackoverflow
Solution 4 - JqueryppolyzosView Answer on Stackoverflow
Solution 5 - JqueryGayan WeerakuttiView Answer on Stackoverflow
Solution 6 - Jqueryghodasara kevalView Answer on Stackoverflow