Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to handle ESC keydown on JavaScript popup window?
When we press the escape key, the event generated is detected using the keyup and keydown event handlers. When the escape key is pushed on the keyboard, the event handler runs across the page. Let's dive into the article for getting better understanding on handling ESC keydown on JavaScript popup window.
Using keydown Event
When a key is pushed, the keydown event is triggered. The keydown event is called for all keys, regardless of whether they generate a character value, in contrast to the deprecated keypress event. While keypress shows which character was entered, keydown and keyup events give a code indicating which key is hit.
Syntax
onkeydown = (event) => { };
Example 1: Basic ESC Key Detection
In the following example, we are running the script that indicates when the ESC key is pressed by using a keydown event.
<!DOCTYPE html>
<html>
<body onkeydown="esckey(event)">
<p id="tutorial"></p>
<script>
function esckey(evt) {
if (evt.keyCode == 27) {
document.getElementById("tutorial").innerHTML = 'Escape key was pressed';
}
}
</script>
</body>
</html>
When the script gets executed, it will generate an output, making the event triggered. When the user presses the "ESC" key, it will display that the "ESC" key was pressed.
Example 2: Modern ESC Key Detection with Alert
Consider the following example, here we are using the keydown event to make an alert whether the "ESC" key was pressed or not.
<!DOCTYPE html>
<html>
<body>
<p>Press the ESC key to trigger the alert</p>
<button id="tutorial" type="submit">Click me first</button>
<script>
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 Key Was Pressed");
}
};
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the text along with a click button on the webpage. When the user presses the ESC key, an event is triggered and the message "Escape key was pressed" is displayed.
Example 3: ESC Key Detection with Other Keys
Execute the below script and observe how the event triggers whenever the ESC key is pressed or some other key.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<p>Press any key to see the detection</p>
<div id="output"></div>
<script>
$(document).keydown(function (eventValue) {
if (eventValue.keyCode == 27) {
$("#output").html("ESC key is pressed....");
} else {
$("#output").html("Some other key is pressed....");
}
});
</script>
</body>
</html>
When the script is executed, it generates an output, triggering the event, and displays the text whenever the user presses any key. If the user presses the ESC key, it displays "ESC key is pressed."
Key Points
- The ESC key has a keyCode of 27
- Modern browsers support both evt.key and evt.keyCode properties
- Use evt.key === "Escape" for better compatibility with modern standards
- The keydown event fires when any key is pressed down
Conclusion
Handling ESC key events in JavaScript is straightforward using the keydown event listener. Use keyCode 27 or evt.key === "Escape" to detect the ESC key reliably across different browsers.
4K+ Views
