Cómo detectar la tecla TAB en JavaScript

A menudo nos encontramos con sitios web o páginas web que comprenden el elemento sensible a los casos. Además, algunas páginas web no le permiten ingresar los datos siempre que se presione la tecla específica, como el bloqueo de CAPS, especialmente en el caso de las contraseñas. En tales casos, la detección de la tecla Tab en JavaScript se vuelve muy útil para alertar al usuario de los datos ingresados ​​de antemano.

Esta redacción lo guiará para detectar la tecla Tab en JavaScript.

Cómo detectar la tecla TAB en JavaScript?

Para detectar la tecla Tab en JavaScript, aplique las siguientes técnicas:

• "QuerySelector ()" Método
• "getElementById ()" Método

Los enfoques mencionados se demostrarán uno por uno!

Método 1: Detección de la tecla Tab en JavaScript usando el documento.método QuerySelector ()

El "documento.QuerySelector ()El método "accede al primer elemento que coincide con un selector CSS, y luego el método AddEventListener () agrega un controlador de eventos al elemento accedido. Estos métodos se pueden aplicar para acceder al tipo de entrada y detectar si la tecla Tab está presionada o no cuando se ingresa su valor.

Sintaxis

elemento.AddEventListener (evento, función, useCapture)

En la sintaxis dada, "evento"Se refiere al nombre del evento", "función"Es la función específica para ejecutar cuando ocurre el evento y"Usecapture"Es el argumento opcional.

documento.QuerySelector (selectores CSS)

En la sintaxis anterior, "Selectores CSS"Consulte uno o más selectores CSS que se puedan especificar en el documento.método QuerySelector ().

Revisar el siguiente ejemplo para una mejor comprensión del concepto declarado.

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

Resultado

A continuación, aplique el "documento.QuerySelector ()"Método para acceder a la entrada especificada y el encabezado respectivamente y almacenarlos en las variables llamadas"aporte" y "resultado":

dejar entrada = documento.QuerySelector ("entrada");
Sea resultado = documento.QuerySelector ("H2");

Ahora, agregue el "llave"Evento con el campo de entrada utilizando el método AddEventListener (). Este evento notificará al usuario cada vez que el "pestaña"La tecla se presiona en el campo de entrada aplicando la siguiente condición con la ayuda del"intexto" propiedad:

aporte.addEventListener ("Keydown", (e) =>
if (e.clave === "pestaña")
resultado.inntext = "Tabla de tabla presionada";
demás
resultado.inntext = "tecla tab no presionada";

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

Método 2: Detección de la tecla Tab en JavaScript usando el documento.método getElementById ()

El "documento.getElementById ()El método se puede utilizar para acceder a un elemento HTML particular basado en su ID. Este método se puede implementar para obtener el campo de entrada y agregar un evento para alertar al usuario siempre que se presione la tecla particular, como la tecla Tab.

Sintaxis

documento.getElementById (ElementId)

En la sintaxis dada, "elemento"Se refiere a la identificación de un elemento especificado.

Vamos a ver el siguiente ejemplo.

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

Ahora, obtenga la ID del campo de entrada usando el "documento.getElementById ()" método.

dejar entrada = documento.getElementById ("pestaña");

Finalmente, agregue un evento llamado "llave"En el método addEventListener (), que alertará al usuario cada vez que el"PestañaSe presiona la tecla:

aporte.addEventListener ("Keydown", (e) =>
if (e.clave === "pestaña")
alerta ("Tecla Tab Presionada");

);

Producción

Hemos discutido todos los métodos más simples para detectar la tecla Tab en JavaScript.

Conclusión

Para detectar la tecla TAB en JavaScript, utilice el "addEventListener ()" con el "documento.QuerySelector ()"Método para obtener el tipo de entrada y aplicar un evento para detectar la clave especificada o la"getElementById ()"Método para obtener el campo de entrada en función de su ID y notificar al usuario cada vez que se cumple la condición adicional. Este blog guió sobre la detección de la tecla Tab en JavaScript.