En JavaScript, mantener presionada una tecla activará la tecla continuamente hasta que se suelte. Este comportamiento se puede usar en aplicaciones como juegos en los que se espera que una tecla se active solo una vez, incluso después de mantenerla presionada. Esto se puede lograr usando dos métodos:
Método 1: uso de una variable indicadora para verificar el estado actual de la tecla: se define una variable indicadora que realiza un seguimiento de la pulsación actual de la tecla. Los eventos ‘keyup’ y ‘keydown’ están configurados para modificar esta variable indicadora de modo que refleje correctamente el estado actual de la pulsación de tecla.
El evento ‘keydown’ solo permite que se active el evento respectivo si la tecla aún no se mantiene presionada al verificar la variable de bandera. El evento ‘keyup’, por otro lado, establece la variable de bandera para indicar que la tecla ha sido liberada. Al usar ambos con detectores de eventos, uno puede asegurarse de que la tecla se active solo una vez, incluso si se mantiene presionada.
Sintaxis:
let isPressed = false;
element.onkeydown = function (e) {
if (!isPressed) {
isPressed = true;
console.log('Key Fired!');
}
};
element.onkeyup = function (e) {
isPressed = false;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to make a key fire when key
pressed using JavaScript ?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to make a key fire only
once when pressed?
</b>
<p>
Press any button and observe
the logs to verify that a key
only fires once.
</p>
<input type="text">
<script type="text/javascript">
let element = document.querySelector('input');
let isPressed = false;
element.onkeydown = function (e) {
if (!isPressed) {
isPressed = true;
console.log('Key Fired!');
}
};
element.onkeyup = function (e) {
isPressed = false;
}
</script>
</body>
</html>
Producción:
Método 2: usar la propiedad de repetición: la propiedad ‘repetir’ de la interfaz KeyboardEvent se usa para verificar si una tecla se repite como resultado de que el usuario la mantenga presionada. Esta propiedad se puede verificar en cada evento ‘keydown’ y permite que el evento especificado solo se active si devuelve falso. Esto evita que la tecla se dispare varias veces incluso si el usuario mantiene presionada la tecla.
Sintaxis:
element.onkeydown = function (e) {
if (!e.repeat) {
console.log("Key Fired!");
}
};
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to make a key fire when key
pressed using JavaScript ?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to make a key fire only
once when pressed?
</b>
<p>
Press any button and observe
the logs to verify that a key
only fires once.
</p>
<input type="text">
<script type="text/javascript">
let element =
document.querySelector('input');
element.onkeydown = function (e) {
if (!e.repeat) {
console.log("Key Fired!");
}
};
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA