En JavaScript, cada vez que se presiona o suelta una tecla, se activan ciertos eventos. Cada uno de estos eventos tiene un significado diferente y se puede usar para implementar ciertas funcionalidades según el estado actual y la clave que se esté usando.
Estos eventos que se activan cuando se presiona una tecla están en el siguiente orden:
- Keydown Event: Este evento ocurre cuando el usuario ha presionado la tecla. Ocurrirá incluso si la tecla presionada no produce un valor de carácter.
- Evento de pulsación de tecla: este evento ocurre cuando el usuario presiona una tecla que produce un valor de carácter. Estos incluyen claves como las teclas alfabéticas, numéricas y de puntuación. Las teclas modificadoras como ‘Shift’, ‘CapsLock’, ‘Ctrl’, etc. no producen un carácter, por lo tanto, no tienen un evento ‘presionar tecla’ adjunto.
- Keyup Event: Este evento ocurre cuando el usuario ha soltado la tecla. Ocurrirá incluso si la tecla liberada no produce un valor de carácter.
Tenga en cuenta que diferentes navegadores pueden tener diferentes implementaciones de los eventos anteriores. Los eventos onKeyDown , onKeyPress y onKeyUp se pueden usar para detectar estos eventos respectivamente.
El siguiente ejemplo muestra diferentes eventos que se activan cuando se presiona una tecla en su orden respectivo.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
<b>onKeyPress Vs. onKeyUp
and onKeyDown Events</b>
</p>
<input type="text" id="field" placeholder="Type here">
<p id="status"></p>
<script>
// Script to test which key
// event gets triggered
// when a key is pressed
var key_pressed =
document.getElementById('field');
key_pressed
.addEventListener("keydown", onKeyDown);
key_pressed
.addEventListener("keypress", onKeyPress);
key_pressed
.addEventListener("keyup", onKeyUp);
function onKeyDown(event) {
document.getElementById("status")
.innerHTML = 'keydown: '
+ event.key + '<br>'
}
function onKeyPress(event) {
document.getElementById("status")
.innerHTML += 'keypress: '
+ event.key + '<br>'
}
function onKeyUp(event) {
document.getElementById("status")
.innerHTML += 'keyup: '
+ event.key + '<br>'
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nischaldutt y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA