How to detect escape key press using jQuery?

Last Updated : 12 Apr, 2019

To detect escape key press, keyup or keydown event handler will be used in jquery. It will trigger over the document when the escape key will be pressed from the keyboard.

keyup event: This event is fired when key is released from the keyboard.
keydown event: This event is fired when key is pressed from the keyboard.

Syntax:

$(document).on('keydown', function(event) {
       if (event.key == "Escape") {
           alert('Esc key pressed.');
       }
   });

Explanation:
Over whole document we are calling the on method and we are passing the keydown or keyup event as first parameter. As second parameter a function is attached which invokes when keydown or keyup event occurs and it will show an alert on pressing the escape key from the keyboard.

Example-1: This example detects the escape key press(using keydown event handler)

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <title> 
      escape-jquery-detection 
  </title> 
    <script src= 
"https://code.jquery.com/jquery-3.3.1.min.js"> 
  </script> 
</head> 
  
<body> 
    <h1> 
      Escape jquery detection 
      using keydown event handler 
  </h1> 
</body> 
  
<script> 
    $(document).on( 
      'keydown', function(event) { 
        if (event.key == "Escape") { 
            alert('Esc key pressed.'); 
        } 
    }); 
</script> 
  
</html> 

Output before pressing escape:

Output after pressing escape:

Example-2: This example detects the escape key press (using keyup event handler)

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <title> 
      escape-jquery-detection 
  </title> 
    <script src= 
"https://code.jquery.com/jquery-3.3.1.min.js"> 
  </script> 
</head> 
  
<body> 
    <h1> 
Escape jquery detection using keyup event handler 
  </h1> 
</body> 
  
<script> 
    $(document).on('keyup', function(event) { 
        if (event.key == "Escape") { 
            alert('Esc key pressed.'); 
        } 
    }); 
</script> 
  
</html> 