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?

This is a [known bug](https://bugs.chromium.org/p/chromium/issues/detail?id=9061) of Chrome. In May 2016 a developer stated that they think their behaviour fits the spec better and [will not fix it](https://bugs.chromium.org/p/chromium/issues/detail?id=9061#c15). — Sheepy, Feb 02 '17 at 04:50

score 122 · Accepted Answer · answered Oct 10 '10 at 16:17

122

Try handling keydown instead.

answered Oct 10 '10 at 16:17

SLaks

868,454
176
1,908
1,964

19

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. – Kato Jun 24 '12 at 18:33
1

Does anyone know why this is implemented as such? – Max Strater Mar 24 '15 at 02:24
5

@MaxStrater: `keypress` is only for actual characters. – SLaks Mar 24 '15 at 02:27
`keyup` is slightly better for replicating `keypress` functionality since it doesn't fire until the user releases the key. – Daniel Tonon Aug 10 '15 at 07:38
@DanT: On the contrary. If he wants to replicate `keypress`, he'll _want_ the repeated `keydown`s. – SLaks Aug 10 '15 at 14:18
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. – Mark Baijens Mar 30 '18 at 13:24

score 20 · Answer 2 · answered Mar 29 '11 at 22:26

20

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

answered Mar 29 '11 at 22:26

bear

1,318
5
16
26

1

Thank you for mentioning the Chrome bug. It will be helpful to those wondering why keypress is actually working for them in other browsers. – Gustus Mar 19 '15 at 19:28
neither `keypress` nor `keyup` doesn't work for ESC key on Chromium 69.0.3497.92. on linux. `keydown` works flawlessly – pouya Sep 23 '18 at 16:15

score 2 · Answer 3 · edited May 31 '17 at 20:31

2

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

edited May 31 '17 at 20:31

cwallenpoole

79,954
26
128
166

answered Feb 04 '13 at 06:50

Dylan Foregger

21
2

score 1 · Answer 4 · answered Nov 06 '12 at 10:32

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

score 1 · Answer 5 · answered Feb 04 '18 at 07:05

1

keypress 'ESC'

e.which: 0
e.keyCode: 27

keyup 'ESC'

e.which: 27
e.keyCode: 27

For non-printable characters better use keyup.

answered Feb 04 '18 at 07:05

Gayan Weerakutti

11,904
2
71
68

score 0 · Answer 6 · edited Mar 30 '17 at 09:27

0

Using Jquery.hotkey js file you can Make Sortcut key

$(document).bind('keydown', 'esc', function(){ });

edited Mar 30 '17 at 09:27

Hkachhia

4,463
6
41
76

answered Dec 20 '16 at 06:30

ghodasara keval

21
4

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) 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. – DimaSan Dec 20 '16 at 09:36

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

6 Answers6

Linked