Cómo funcionan los códigos clave en JavaScript?

Los códigos clave en JavaScript funcionan asignando un valor de código de clave particular a la clave correspondiente. Esta funcionalidad ayuda a restringir al usuario que ingrese un valor no válido, especialmente cuando se complete un formulario o un cuestionario. Del mismo modo, provocando el usuario final del habilitado "Bloq Mayús"Al llenar un campo sensible a la caja.

¿Qué son los códigos clave??

JavaScript asigna un código numérico a cada tecla contenida en un teclado. Los códigos clave para las teclas alfanuméricas y de función están numeradas consecutivamente. En este blog, se explicará el funcionamiento de los siguientes códigos de teclas contra las claves en particular:

Llave	Clave
Pestaña	9
Ingresar	13

Sintaxis

evento.clave

En la sintaxis anterior:

• "evento"Se refiere al evento adjunto a la clave particular contra el código de la clave.

¿Cómo funcionan los códigos clave en JavaScript??

El funcionamiento de los códigos clave se puede llevar a cabo utilizando el "addEventListener ()"Método en combinación con los siguientes métodos:

• "getElementById ()" método.
• "QuerySelector ()" método.

Enfoque 1: Trabajo de códigos clave en JavaScript utilizando el método GetElementById ()

El "addEventListener ()"El método adjunta un evento al elemento y el"getElementById ()"El método accede a un elemento que tiene el especificado"identificación". Estos métodos se pueden utilizar para acceder al campo de texto de entrada y detectar la clave particular con la ayuda del código de clave asignado y un evento adjunto.

Sintaxis

elemento.addEventListener (evento, oyente, uso);

En la sintaxis anterior:

• "evento"Indica el evento adjunto.
• "oyente"Corresponde a la función que se invocará.
• "usar"Es el valor opcional.

documento.getElementById (elemento)

En la sintaxis dada:

• "elemento"Corresponde al"identificación"Ser recuperado contra el elemento particular.

Ejemplo

Centrémonos en el ejemplo declarado a continuación:

Detectar la tecla Tab

Deje obtener = documento.getElementById ("texto");
Sea resultado = documento.getElementById ("Cabeza");
conseguir.addEventListener ("Keydown", (e) =>
if (e.KeyCode === 9)
resultado.inntext = "Tabla de tabla presionada";

demás
resultado.inntext = "tecla tab no presionada";

);

En el código anterior-snippet:

• Asignar una entrada "texto"Campo con el especificado"identificación" y "marcador de posición" valor.
• En el siguiente paso, incluya el encabezado establecido para contener el mensaje que se muestra en el modelo de objeto de documento (DOM) tras la detección de la clave particular.
• En la parte de JavaScript del código, acceda a la entrada "texto"Campo y el encabezado incluido por su"identificación" utilizando el "getElementById ()" método.
• Después de eso, adjunte un evento llamado "llave" hacia "aporte"Campo de texto usando el"addEventListener ()" método.
• Además, aplique el "clave"Propiedad y asigna el código clave del"Pestaña" llave.
• Esto dará como resultado mostrar el mensaje establecido en el "si"Condición como un encabezado al detectar la tecla Tab a través del"intexto" propiedad.
• En el otro caso, el "demás"La condición se ejecutará.

Producción

De la salida anterior, se puede observar que la detección del "Pestaña"La clave se está haciendo con éxito.

Enfoque 2: Trabajo de códigos clave en JavaScript utilizando el método QuerySelector ()

El "QuerySelector ()El método "obtiene el primer elemento que coincide con un selector CSS. Este método se puede utilizar para acceder de manera similar al campo de texto de entrada y adjuntarle un evento, lo que resulta en la detección de la clave especificada basada en el código de clave.

Sintaxis

documento.QuerySelector (selectores CSS)

En la sintaxis dada anteriormente:

• "Selectores CSS"Se refiere a uno o más de un selectores CSS.

Ejemplo

Observemos el siguiente ejemplo paso a paso:

Detectar la tecla Intro

Deje obtener = documento.QuerySelector ("entrada");
Sea resultado = documento.QuerySelector ("H2");
conseguir.addEventListener ("Keydown", (e) =>
if (e.KeyCode === 13)
resultado.inntext = "Ingrese la tecla presionada";

demás
resultado.inntext = "Ingrese la tecla no presionada";

);

En las líneas de código anteriores, realice los siguientes pasos:

• Recuerde los pasos discutidos para incluir un campo de texto de entrada y un encabezado.
• En la parte de JavaScript, acceda de manera similar el campo de entrada asignado y el encabezado utilizando el "QuerySelector ()" método.
• En el siguiente paso, adjunte un evento llamado "llave" hacia "aporte"Campo de texto" usando el "addEventListener ()" método.
• Además, especifique el "clave" del "Ingresar"Clave a través del"clave" propiedad.
• Esto dará como resultado mostrar el mensaje correspondiente en el "si"Condición sobre el detectado"Ingresar" llave.
• En el otro caso, el "demásLa condición permanecerá vigente.

Producción

En la salida anterior, se puede observar que tras la detección del "Ingresar"Clave, el encabezado cambia, haciendo que la detección sea exitosa.

Conclusión

El "addEventListener ()"Método en combinación con el"getElementById ()Método "o el"QuerySelector ()El método se puede implementar para garantizar el funcionamiento de los códigos clave en JavaScript. El enfoque anterior se puede utilizar para acceder al campo de texto de entrada y detectar la clave específica a través del código de clave con la ayuda de un evento adjunto. El último enfoque se puede aplicar para acceder al campo de texto de entrada y adjuntarle un evento, que detectará la clave específica en función de su código de clave. Este tutorial explicó el funcionamiento de los códigos clave en JavaScript.