Computer >> Computer tutorials >  >> Programming >> Javascript

How to handle ESC keydown on JavaScript popup window?


As we know the ESC has the keycode 27. If you will use the keycode 27, then you can handle the condition.

Example

Following is the code −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
</body>
<script>
   $(document).keydown(function (eventValue) {
      if (eventValue.keyCode == 27) {
         console.log("ESC key is pressed....");
      }
      else {
         console.log("Some other is key pressed....")
      }
   });
</script>
</html>

To run the above program, save the file name “anyName.html(index.html)”. Right click on the file and select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

How to handle ESC keydown on JavaScript popup window?

Now I am going to press another button except the ESC key.

Output

This will produce the following output on console −

How to handle ESC keydown on JavaScript popup window?

Now, I am going to press the ESC key. The console output will change −

How to handle ESC keydown on JavaScript popup window?