Para detectar la pulsación de la tecla de escape, se usará el controlador de eventos keyup o keydown en jquery. Se disparará sobre el documento cuando se presione la tecla de escape desde el teclado.
- evento keyup: este evento se activa cuando se suelta la tecla del teclado.
- evento keydown: este evento se dispara cuando se presiona una tecla desde el teclado.
Sintaxis:
$(document).on('keydown', function(event) {
if (event.key == "Escape") {
alert('Esc key pressed.');
}
});
Explicación:
Sobre todo el documento estamos llamando al método on y estamos pasando el evento keydown o keyup como primer parámetro. Como segundo parámetro se adjunta una función que invoca cuando ocurre un evento keydown o keyup y mostrará una alerta al presionar la tecla escape del teclado.
Ejemplo-1: este ejemplo detecta la pulsación de la tecla Escape (usando el controlador de eventos keydown)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
escape-jquery-detection
</title>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</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>
Salida antes de presionar escape:
Salida después de presionar escape:
Ejemplo-2: este ejemplo detecta la pulsación de la tecla Escape (usando el controlador de eventos keyup)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
escape-jquery-detection
</title>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</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>
Salida antes de presionar escape:
Salida después de presionar escape:
Publicación traducida automáticamente
Artículo escrito por AshishkrGoyal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA