Mientras trabajamos con algún tipo de aplicación web, a menudo necesitamos conocer información diversa sobre la interacción del usuario para ejecutar nuestra funcionalidad en consecuencia, es decir, usamos API para manejar los clics en los botones, métodos para escuchar las teclas, etc. De manera similar, puede haber algunos casos en los que necesita saber si Bloq Mayús está activo o no. Un caso de uso de esto puede ser el sistema de autenticación donde la aplicación notifica al usuario cuando el bloqueo de mayúsculas está activado durante el ingreso de contraseñas. Con suerte, javascript proporciona métodos y técnicas para solucionar esta situación y vamos a discutir todo esto en este artículo.
KeyboardEvent: esta API web se utiliza para tratar la interacción del usuario por teclado, los diversos eventos describen qué tipo de actividad se ha producido.
- keydown: Se dispara cuando se presiona una tecla.
- keyup: Se activa cuando se suelta una tecla.
El evento que ocurre debido al teclado viene bajo KeyboardEvent Object.
Teclas modificadoras: estas teclas se usan junto con otras teclas para realizar algún propósito especial o atajo. Hay dos tipos de teclas modificadoras que permanecen activadas cuando se presionan, es decir, shift, ctrl, alt, etc. Las otras son las que se activan cuando se presionan y se desactivan cuando se presionan nuevamente, es decir, Bloq Mayús, etc.
getModifierState: este es el método del objeto KeyboardEvent y devuelve un booleano sobre si la tecla modificadora dada está activada o no durante ese evento.
Sintaxis:
const isActive = event.getModifierState(keyString); // It will return a boolean // keyString: A string to be passed i.e. "Alt", // "CapsLock", "Control", "NumLock", etc.
Ejemplo: Ahora detectaremos si la tecla Bloq Mayús está encendida o no. Aquí vamos a demostrar un ejemplo simple en el que detectaremos el estado de activación de la tecla de bloqueo de mayúsculas.
Paso 1: aquí hemos creado una página HTML simple que contiene un div con algo de texto y elementos de entrada y un párrafo para mostrar el texto de advertencia.
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>CapsLock Detecter</title> </head> <body> <div>Enter Some Text: <input id="text" type="text" /></div> <p id="warn" style="display:none; color:red"> Warning: CapsLock is On! </p> <script src="./index.js"></script> </body> </html>
Paso 2: este archivo index.js se adjunta en la etiqueta de secuencia de comandos del archivo HTML anterior. Simplemente estamos extrayendo el elemento de entrada para agregar un detector de eventos y también estamos extrayendo el párrafo de texto de advertencia para cambiar su estilo. Después de eso, hemos pasado una función de devolución de llamada al método addEventListener para el evento » keyup «. Dentro de esa función, estamos comprobando si la tecla de bloqueo de mayúsculas se activó o cuándo se soltó la tecla.
index.js
// Get the input field
const input = document.getElementById("text");
// Get the warning warnText
const warnText = document.getElementById("warn");
// add event listener to input
input.addEventListener("keyup", function(event) {
// If capslock is pressed, display the warnText
if (event.getModifierState("CapsLock")) {
warnText.style.display = "block";
} else {
warnText.style.display = "none";
}
});
Salida: esta sería la salida del fragmento de código anterior, cada vez que presionamos la tecla generaría un evento en la liberación de la tecla.
Explicación: aquí hemos escrito «abc» al comenzar, tan pronto como presionamos el bloqueo de mayúsculas, se generará el evento y luego la funcionalidad lo detecta y cambia ese elemento p para que aparezca. Nuevamente, cuando presionamos el bloqueo de mayúsculas, el evento se generará al soltar la tecla y la funcionalidad lo detectará, por lo que la próxima vez que presionemos cualquier tecla, la etiqueta p se ocultará.
Publicación traducida automáticamente
Artículo escrito por mrtwinklesharma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA