How to detect escape key press with jQuery?

Learn, how can we detect the press of the Escape key on the keyboard using jQuery?
Submitted by Pratishtha Saxena, on September 17, 2022

Prerequisite: Adding jQuery to Your Web Pages

Sometimes, it is important to know when a particular key has been pressed by the user. Some of the further tasks are related to it. Hence, at times we need to detect the enter key, sometimes others. Here, it is the case of detecting the Escape key on the keyboard. Let's see how.

Detect escape key press using keyup or keydown handlers

Whenever any key press-related events have to be tracked down in jQuery, there are keypress events to use. The keypress events include the keydown handler and the keyup handler. The keydown is triggered when the key is pressed downwards and hence it fires the function or the events for this. Whereas, the keyup gets triggered when the key is released by the user and hence it fires its functions and events at that time. Any of them can be used for key detection.

Syntax:

$(selector).keyup(function)
$(selector).keydown(function)

Now, once the key press has been detected, we have to check whether the key pressed is the specific key, i.e., Escape key, or not (here). For this thing, we need to cross-check the key code of the pressed key with that of the ESC key. The code of the ESC key is 27. Hence, if the code of the key pressed is the same as 27, then we can perform the required task for it.

Example 1: Detect escape key press using keyup or keydown handlers

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Detect Escape Key Press Using jQuery</h2>
    <p>If 'ecs' is pressed on the keyboard, then it will display the same below. </p>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).on('keydown', function(event) {
        if (event.keyCode == 27) {
            $('h3').html('Escape Key Has Been Pressed !!');
        }
    });
  </script>
</html>

Output:

If the key code is not known for the ESC key, then we can also simply specify 'Escape' and if that pressed key matches this, then it will follow the function attached to it.

Example 2: Detect escape key press using keyup or keydown handlers

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Detect Escape Key Press Using jQuery</h2>
    <p>If 'ecs' is pressed on the keyboard, then it will display the same below. </p>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).on('keydown', function(event) {
      if (event.key == "Escape") {
        $('h3').html('Escape Key Has Been Pressed !!');
      }
    });
  </script>
</html>

Output: