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

Question

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?

Solution 1

Try handling keydown instead.

Solution 2

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

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

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

keypress 'ESC'

e.which: 0
e.keyCode: 27

keyup 'ESC'

e.which: 27
e.keyCode: 27

---

For non-printable characters better use keyup.

View more solutions

Comments

[Kato]

The trick to this answer, which I think is very important to note, is that "try handling keydown" is not a general purpose solution, but specific to "some keys". You still need keypress to handle the ascii characters correctly. So it's really a (muddled) multi-step process.

[Gustus]

Thank you for mentioning the Chrome bug. It will be helpful to those wondering why keypress is actually working for them in other browsers.

[Max Strater]

Does anyone know why this is implemented as such?

[SLaks]

@MaxStrater: keypress is only for actual characters.

[Daniel Tonon]

keyup is slightly better for replicating keypress functionality since it doesn't fire until the user releases the key.

[SLaks]

@DanT: On the contrary. If he wants to replicate keypress, he'll want the repeated keydowns.

[DimaSan]

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

[Mark Baijens]

Note: keydown fires multiple times when the key is hold down. While keypress should only fire once when pressing a key. They are not the same.

[pouya]

neither keypress nor keyup doesn't work for ESC key on Chromium 69.0.3497.92. on linux. keydown works flawlessly