Como detectar a tecla TAB em JavaScript

Muitas vezes encontramos sites ou páginas da web que compreendem o elemento sensível ao caso. Além disso, algumas páginas da web não permitem inserir os dados, desde que a chave específica, como o Caps Lock, seja pressionada, especialmente no caso de senhas. Nesses casos.

Este artigo o guiará para detectar a tecla Tab em JavaScript.

Como detectar a tecla TAB em JavaScript?

Para detectar a tecla TAB no JavaScript, aplique as seguintes técnicas:

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

As abordagens mencionadas serão demonstradas uma a uma!

Método 1: Detecte a tecla TAB em JavaScript usando o documento.Método querySelector ()

O "documento.QuerySelector ()”O método acessa o primeiro elemento que corresponde a um seletor CSS e, em seguida, o método addEventListener () adiciona um manipulador de eventos ao elemento acessado. Esses métodos podem ser aplicados para acessar o tipo de entrada e detectar se a tecla de guia é pressionada ou não quando seu valor é inserido.

Sintaxe

elemento.addEventListener (evento, função, usecapture)

Na sintaxe dada, “evento”Refere -se ao nome do evento,“função”É a função específica a ser executada quando o evento ocorre e“Usecapture”É o argumento opcional.

documento.QuerySelector (seletores CSS)

Na sintaxe acima, “Seletores CSS”Consulte um ou mais seletores CSS que podem ser especificados no documento.Método querySelector ().

Passe pelo exemplo a seguir para uma melhor compreensão do conceito declarado.

Exemplo
Em primeiro lugar, especifique o tipo de entrada como “texto”Com um valor inicial de espaço reservado e um título no“" marcação:

Resultado

Em seguida, aplique o “documento.QuerySelector ()”Método para acessar a entrada especificada e o título, respectivamente, e armazená -los nas variáveis ​​denominadas“entrada" e "resultado”:

Deixe input = documento.QuerySelector ("entrada");
Let Result = Documento.QuerySelector ("H2");

Agora, adicione o “keydown”Evento com o campo de entrada usando o método addEventListener (). Este evento notificará o usuário sempre que o “aba”A tecla é pressionada no campo de entrada aplicando a seguinte condição com a ajuda do“InnerText" propriedade:

entrada.addEventListener ("keydown", (e) =>
se (e.chave === "tab")
resultado.INNERTEXT = "Tecla de guia pressionada";
outro
resultado.INNERTEXT = "Tecla de guia não pressionada";

Nesse caso, quando o usuário pressionar a tecla TAB, o adicionado notificará sobre a ação executada:

Método 2: Detecte a tecla TAB em JavaScript usando o documento.getElementById () método

O "documento.getElementById ()”O método pode ser utilizado para acessar um determinado elemento HTML com base em seu ID. Este método pode ser implementado para obter o campo de entrada e adicionar um evento para alertar o usuário sempre que a tecla específica for pressionada, como a tecla de guia.

Sintaxe

documento.getElementById (ElementId)

Na sintaxe dada, “ElementId”Refere -se ao ID de um elemento especificado.

Vamos ver o exemplo seguinte.

Exemplo
No exemplo abaixo, inclua um tipo de entrada e um valor de espaço reservado, conforme discutido no método anterior:

Agora, busque o ID do campo de entrada usando o “documento.getElementById ()”Método.

Deixe input = documento.getElementById ("Tab");

Finalmente, adicione um evento chamado “keydown”No método addEventListener (), que alertará o usuário sempre que o“Aba”A tecla é pressionada:

entrada.addEventListener ("keydown", (e) =>
se (e.chave === "tab")
alerta ("tecla de guia pressionada");

);

Saída

Discutimos todos os métodos mais simples para detectar a tecla TAB no JavaScript.

Conclusão

Para detectar a tecla TAB em JavaScript, utilize o “addEventListener ()" com o "documento.QuerySelector ()”Método para obter o tipo de entrada e aplicar um evento para detectar a chave especificada ou“getElementById ()”Método para buscar o campo de entrada com base em seu ID e notificar o usuário sempre que a condição adicionada é satisfeita. Este blog guiou sobre a detecção da tecla de guia em JavaScript.