Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
Following is the syntax for keydown event
onkeydown = (event) => { };
Let's look into the following examples for getting more idea on handling esc keydown on JavaScript popup window.
Example
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 clicks the "esc" key, it will display that the "esc" key was pressed.
Example
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>Click The Button and Then Press Esc Key</p>
<button id="tutorial" type="submit">click</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 clicks the button and presses the esc key, an event is triggered and the message "escape key was pressed" is displayed.
Example
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">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<body>
<script>
$(document).keydown(function (eventValue) {
if (eventValue.keyCode == 27) {
document.write("ESC key is pressed....");
} else {
document.write("Some other is key pressed....")
}
});
</script>
</body>
</html>
When the script is executed, it generates an output, triggering the event, and displays the text whenever the user presses the key; for example, if the user clicks the esc key, it displays "esc key is pressed."
4K+ Views
