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)
<!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> |
Output before pressing escape:
Output after pressing escape:
Example-2: This example detects the escape key press (using keyup event handler)
<!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> |
Output before pressing escape:
Output after pressing escape:
