Cómo detectar la tecla de tabulación en JavaScript

A menudo nos encontramos con sitios web o páginas web que comprenden el elemento que distingue entre mayúsculas y minúsculas. Además, algunas páginas web no permiten ingresar los datos mientras se presione la tecla específica, como el bloqueo de mayúsculas, especialmente en el caso de las contraseñas. En tales casos, la detección de la tecla de tabulación en JavaScript se vuelve muy útil para alertar al usuario de los datos ingresados de antemano.

Este artículo lo guiará para detectar la tecla de tabulación en JavaScript.

¿Cómo detectar la tecla de tabulación en JavaScript?

Para detectar la tecla de tabulación en JavaScript, aplique las siguientes técnicas:

“ selector de consulta() ' Método
“ getElementbyId() ' Método

¡Los enfoques mencionados se demostrarán uno por uno!

Método 1: detectar la tecla de tabulación en JavaScript utilizando el método document.querySelector()

Los ' documento.querySelector() ” accede al primer elemento que coincide con un selector de CSS, y luego el método addEventListener() agrega un controlador de eventos al elemento al que se accede. Estos métodos se pueden aplicar para acceder al tipo de entrada y detectar si la tecla de tabulación se presiona o no cuando se ingresa su valor.

Sintaxis

elemento. agregarEventListener ( evento , función , usarCapturar )

En la sintaxis dada, “ evento ” se refiere al nombre del evento, “ función ” es la función específica a ejecutar cuando ocurre el evento, y “ usarCapturar ” es el argumento opcional.

documento. selector de consulta ( Selectores de CSS )

En la sintaxis anterior, “ Selectores de CSS ” se refieren a uno o más selectores de CSS que se pueden especificar en el método document.querySelector().

Lea el siguiente ejemplo para una mejor comprensión del concepto establecido.

Ejemplo
En primer lugar, especifique el tipo de entrada como ' texto ” con un valor de marcador de posición inicial y un encabezado en el “ ' etiqueta:

< aporte escribe = 'texto' marcador de posición = 'Ingrese texto' >
< h2 > Resultado < / h2 >

A continuación, aplique el “ documento.querySelector() ” método para acceder a la entrada especificada y al encabezado respectivamente y almacenarlos en las variables denominadas “ aporte ' y ' resultado ”:

dejar entrada = documento. selector de consulta ( 'aporte' ) ;
deja que resulte = documento. selector de consulta ( 'h2' ) ;

Ahora, agregue el ' pulsación de tecla ” con el campo de entrada utilizando el método addEventListener(). Este evento notificará al usuario cada vez que el “ pestaña Se presiona la tecla ” en el campo de entrada aplicando la siguiente condición con la ayuda de la tecla “ textointerno ' propiedad:

aporte. agregarEventListener ( 'teclado' , ( y ) => {
si ( y. llave === 'Pestaña' ) {
resultado. textointerno = 'Tecla de tabulación presionada' ;
} más {
resultado. textointerno = 'Tecla de tabulación no presionada' ;
}

En este caso, cuando el usuario presione la tecla de tabulación, el agregado notificará sobre la acción realizada:

Método 2: detectar la tecla de tabulación en JavaScript usando el método document.getElementbyId()

Los ' documento.getElementById() El método ” se puede utilizar para acceder a un elemento HTML en particular en función de su id. Este método se puede implementar para obtener el campo de entrada y agregar un evento para alertar al usuario cada vez que se presiona una tecla en particular, como la tecla de tabulación.

Sintaxis

documento. getElementById ( elementos )

En la sintaxis dada, “ elementos ” se refiere a la identificación de un elemento específico.

Repasemos el siguiente ejemplo.

Ejemplo
En el siguiente ejemplo, incluya un tipo de entrada y un valor de marcador de posición como se explicó en el método anterior:

< aporte escribe = 'texto' identificación = 'pestaña' marcador de posición = 'Ingrese texto' >

Ahora, obtenga la identificación del campo de entrada usando el ' documento.getElementById() ' método.

let input= document.getElementById(“tab”);

Finalmente, agregue un evento llamado “ pulsación de tecla ” en el método addEventListener(), que alertará al usuario cada vez que el “ Pestaña Se presiona la tecla ”:

aporte. agregarEventListener ( 'teclado' , ( y ) => {
si ( y. llave === 'Pestaña' ) {
alerta ( 'Tecla de tabulación presionada' ) ;
}
} ) ;

Producción

Hemos discutido todos los métodos más simples para detectar la tecla de tabulación en JavaScript.

Conclusión

Para detectar la tecla de tabulación en JavaScript, utilice el ' agregarEventListener() ' con el ' documento.querySelector() ” método para obtener el tipo de entrada y aplicar un evento para detectar la clave especificada o el “ getElementbyId() ” método para obtener el campo de entrada en función de su id y notificar al usuario cada vez que se cumpla la condición añadida. Este blog se guió sobre la detección de la tecla de tabulación en JavaScript.

Cómo detectar la tecla de tabulación en JavaScript