How to detect escape key press with pure JS or jQuery?

Question

Possible Duplicate:
Which keycode for escape key with jQuery

How to detect escape key press in IE, Firefox and Chrome? Below code works in IE and alerts 27, but in Firefox it alerts 0

$('body').keypress(function(e){     alert(e.which);     if(e.which == 27){         // Close my modal window     } }); 

Answer 1

Note: keyCode is becoming deprecated, use key instead.

function keyPress (e) {     if(e.key === "Escape") {         // write your logic here.     } } 

Code Snippet:

var msg = document.getElementById('state-msg');  document.body.addEventListener('keypress', function(e) {   if (e.key == "Escape") {     msg.textContent += 'Escape pressed:'   } });

Press ESC key <span id="state-msg"></span>

---

keyCode is becoming deprecated

It seems keydown and keyup work, even though keypress may not

---

$(document).keyup(function(e) {      if (e.key === "Escape") { // escape key maps to keycode `27`         // <DO YOUR WORK HERE>     } }); 

Which keycode for escape key with jQuery

Answer 2

The keydown event will work fine for Escape and has the benefit of allowing you to use keyCode in all browsers. Also, you need to attach the listener to document rather than the body.

Update May 2016

keyCode is now in the process of being deprecated and most modern browsers offer the key property now, although you'll still need a fallback for decent browser support for now (at time of writing the current releases of Chrome and Safari don't support it).

Update September 2018 evt.key is now supported by all modern browsers.

document.onkeydown = function(evt) {      evt = evt || window.event;      var isEscape = false;      if ("key" in evt) {          isEscape = (evt.key === "Escape" || evt.key === "Esc");      } else {          isEscape = (evt.keyCode === 27);      }      if (isEscape) {          alert("Escape");      }  };

Click me then press the Escape key