Como detectar a chave de tabulação em JavaScript

Muitas vezes nos deparamos com sites ou páginas da Web que compreendem o elemento que diferencia maiúsculas de minúsculas. Além disso, algumas páginas da web não permitem que você insira os dados enquanto a tecla específica, como caps lock, estiver pressionada, principalmente no caso de senhas. Nesses casos, detectar a tecla tab no JavaScript torna-se muito útil para alertar o usuário sobre os dados inseridos antecipadamente.

Este artigo irá guiá-lo para detectar a tecla tab em JavaScript.

Como detectar a chave de tabulação 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: detectar a chave de tabulação em JavaScript usando o método document.querySelector()

O ' document.querySelector() ” 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 tab é 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. seletor de consulta ( Seletores CSS )

Na sintaxe acima, “ Seletores CSS ” referem-se a um ou mais seletores CSS que podem ser especificados no método document.querySelector().

Percorra o 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 de espaço reservado inicial e um título no “ ' marcação:

< entrada modelo = 'texto' marcador de posição = 'Digite o Texto' >
< h2 > Resultado < / h2 >

Em seguida, aplique o “ document.querySelector() ” para acessar a entrada especificada e o cabeçalho respectivamente e armazená-los nas variáveis denominadas “ entrada ' e ' resultado ”:

deixe a entrada = documento. seletor de consulta ( 'entrada' ) ;
deixe resultado = documento. seletor de consulta ( 'h2' ) ;

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

entrada. addEventListener ( 'chave para baixo' , ( e ) => {
E se ( e. chave === 'Aba' ) {
resultado. Texto interno = 'Tecla Tab pressionada' ;
} senão {
resultado. Texto interno = 'Tecla Tab não pressionada' ;
}

Neste caso, quando o usuário pressionar a tecla tab, o adicionado notificará sobre a ação realizada:

Método 2: detectar a chave de tabulação em JavaScript usando o método document.getElementbyId()

O ' document.getElementById() ” pode ser utilizado para acessar um elemento HTML específico com base em seu id. Esse método pode ser implementado para obter o campo de entrada e adicionar um evento para alertar o usuário sempre que uma determinada tecla for pressionada, como a tecla tab.

Sintaxe

documento. getElementById ( elementos )

Na sintaxe dada, “ elementos ” refere-se ao id de um elemento especificado.

Vejamos o exemplo a seguir.

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

< entrada modelo = 'texto' Eu iria = 'aba' marcador de posição = 'Digite o Texto' >

Agora, busque o id do campo de entrada usando o “ document.getElementById() ” método.

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

Por fim, adicione um evento chamado “ tecla pressionada ” no método addEventListener(), que alertará o usuário sempre que o “ Aba ” é pressionada:

entrada. addEventListener ( 'chave para baixo' , ( e ) => {
E se ( e. chave === 'Aba' ) {
alerta ( 'Tecla Tab pressionada' ) ;
}
} ) ;

Resultado

Discutimos todos os métodos mais simples para detectar a tecla tab em JavaScript.

Conclusão

Para detectar a tecla tab no JavaScript, utilize o “ addEventListener() ' com o ' document.querySelector() ” para obter o tipo de entrada e aplicar um evento para detectar a chave especificada ou o “ getElementbyId() ” para buscar o campo de entrada com base em seu id e notificar o usuário sempre que a condição adicionada for satisfeita. Este blog orientou sobre como detectar a tecla de tabulação em JavaScript.

Como detectar a chave de tabulação em JavaScript