Skip to content
Related Articles

Related Articles

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)

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>
      escape-jquery-detection
  </title>
    <script src=
  </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>

chevron_right


Output before pressing escape:



Output after pressing escape:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>
      escape-jquery-detection
  </title>
    <script src=
  </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>

chevron_right


Output before pressing escape:

Output after pressing escape:

My Personal Notes arrow_drop_up
Recommended Articles
Page :