Como os códigos de chave funcionam em JavaScript?

Keycodes no trabalho JavaScript atribuindo um valor de código -chave específico à tecla correspondente. Essa funcionalidade ajuda a restringir o usuário de inserir um valor inválido, especialmente ao preencher um formulário ou um questionário. Da mesma forma, solicitando o usuário final do habilitado “Caps Lock”Ao preencher um campo sensível ao caso.

O que são códigos de chave?

JavaScript atribui um código numérico a cada tecla contida em um teclado. Os códigos -chave para as chaves alfanuméricas e de função são numeradas consecutivamente. Neste blog, será explicado o funcionamento dos seguintes códigos de chave em relação às chaves específicas:

Chave	Código chave
Aba	9
Digitar	13

Sintaxe

evento.Código chave

Na sintaxe acima:

• ““evento”Refere -se ao evento anexado à chave específica contra o código -chave.

Como os códigos de chave funcionam em JavaScript?

O funcionamento dos códigos de chave pode ser realizado usando o “addEventListener ()”Método em combinação com os seguintes métodos:

• ““getElementById ()”Método.
• ““QuerySelector ()”Método.

Abordagem 1: Trabalho dos códigos de chave em JavaScript usando o método getElementById ()

O "addEventListener ()”O método anexa um evento ao elemento, e o“getElementById ()”Método acessa um elemento com o especificado“eu ia”. Esses métodos podem ser utilizados para acessar o campo de texto de entrada e detectar a chave específica com a ajuda do código -chave atribuído e um evento anexado.

Sintaxe

elemento.addEventListener (evento, ouvinte, uso);

Na sintaxe acima:

• ““evento”Indica o evento em anexo.
• ““ouvinte”Corresponde à função que será invocada.
• ““usar”É o valor opcional.

documento.getElementById (elemento)

Na sintaxe dada:

• ““elemento"Corresponde ao"eu ia”Para ser buscado contra o elemento específico.

Exemplo

Vamos nos concentrar no exemplo abaixo do ponto:

Detecte a tecla TAB

Let Get = Document.getElementById ("texto");
Let Result = Documento.getElementById ("Head");
pegar.addEventListener ("keydown", (e) =>
se (e.keycode === 9)
resultado.INNERTEXT = "Tecla de guia pressionada";

outro
resultado.INNERTEXT = "Tecla de guia não pressionada";

);

No snippet de código acima:

• Alocar uma entrada “texto”Campo com o especificado“eu ia" e "espaço reservado" valor.
• Na próxima etapa, inclua o cabeçalho declarado para conter a mensagem exibida no Modelo de Objeto do Documento (DOM) após a detecção da chave específica.
• Na parte JavaScript do Código, acesse a entrada “texto”Campo e o cabeçalho incluído por seu“Id's”Usando o“getElementById ()”Método.
• Depois disso, anexe um evento chamado “keydown" para o "entrada“Campo de texto usando o“addEventListener ()”Método.
• Além disso, aplique o “Código chave”Propriedade e atribua o código -chave do“Aba" chave.
• Isso resultará na exibição da mensagem declarada no “se“Condição como um título ao detectar a tecla TAB através do“InnerText" propriedade.
• No outro caso, o “outro“Condição será executada.

Saída

Da saída acima, pode -se observar que a detecção do “Aba”Key está sendo feita com sucesso.

Abordagem 2: Trabalho dos códigos de chave em JavaScript usando o método querySelector ()

O "QuerySelector ()”O método recebe o primeiro elemento que corresponde a um seletor CSS. Este método pode ser utilizado para acessar da mesma forma o campo de texto de entrada e anexar um evento a ele, resultando na detecção da chave especificada com base no código -chave.

Sintaxe

documento.QuerySelector (seletores CSS)

Na sintaxe acima dada:

• ““Seletores CSS”Refere -se a um ou mais de um seletores CSS.

Exemplo

Vamos observar o seguinte exemplo passo a passo:

Detectar a tecla enter

Let Get = Document.QuerySelector ("entrada");
Let Result = Documento.QuerySelector ("H2");
pegar.addEventListener ("keydown", (e) =>
se (e.keycode === 13)
resultado.INNERTEXT = "Digite a tecla pressionada";

outro
resultado.INNERTEXT = "Enter a tecla não pressionada";

);

Nas linhas de código acima, execute as seguintes etapas:

• Lembre -se das etapas discutidas para incluir um campo de texto de entrada e um título.
• Na parte JavaScript, acesse o campo de entrada alocado e o cabeçalho usando o “QuerySelector ()”Método.
• Na próxima etapa, anexe um evento chamado “keydown" para o "entrada"Campo de texto" usando o "addEventListener ()”Método.
• Além disso, especifique o “Código chave" do "Digitar"Chave através da"Código chave" propriedade.
• Isso resultará na exibição da mensagem correspondente no “se“Condição sobre o detectado“Digitar" chave.
• No outro caso, o “outroA condição permanecerá em vigor.

Saída

Na saída acima, pode -se observar que após a detecção do “Digitar"Chave, o título muda, tornando a detecção bem -sucedida.

Conclusão

O "addEventListener ()“Método em combinação com o“getElementById ()”Método, ou o“QuerySelector ()”O método pode ser implementado para garantir o funcionamento dos códigos de chave em JavaScript. A abordagem anterior pode ser utilizada para acessar o campo de texto de entrada e detectar a chave específica por meio do código da chave com a ajuda de um evento anexado. A última abordagem pode ser aplicada para acessar o campo de texto de entrada e anexar um evento a ele, que detectará a chave específica com base em seu código -chave. Este tutorial explicou o funcionamento dos códigos -chave em JavaScript.