Eventos do teclado com JavaScript e Jquery

[ads2]
Olá a todos, o tutorial de hoje ensina como usar atalhos do teclado com JavaScript, uma tarefa bem simples, onde só vamos precisar da lista de valores referentes às teclas e do método keyCode, ou do wich, dependendo do navegador. Para garantir o funcionamento do código em qualquer browser vamos usar ambos.
Na maioria dos sistemas e softwares desktop é comum o uso de teclas de atalho para facilitar a usabilidade e aprendizado do usuário a cerca das funcionalidades do sistema. Em sistemas WEB este uso não é muito comum, mas nem por isso deixa de ser necessário.

Detectando eventos do teclado

Primeiro precisamos detectar os eventos do teclado, ou seja, perceber quando uma tecla é pressionada, para isso você precisa definir em qual elemento você deseja detectar o evento ou se em todo o corpo do documento para usar o evento Keypress da biblioteca jQuery, veja o exemplo de como detectar o comando na página inteira, em qualquer lugar onde esteja o cursor:

No exemplo acima usei o botão 13 que é equivalente ao Enter, a numeração dos demais botões você pode encontrar na lista abaixo:

KEY_DOWN = 40;
KEY_UP = 38;
KEY_LEFT = 37;
KEY_RIGHT = 39;

KEY_END = 35;
KEY_BEGIN = 36;

KEY_BACK_TAB = 8;
KEY_TAB = 9;
KEY_SH_TAB = 16;
KEY_ENTER = 13;
KEY_ESC = 27;
KEY_SPACE = 32;
KEY_DEL = 46;

KEY_A = 65;
KEY_B = 66;
KEY_C = 67;
KEY_D = 68;
KEY_E = 69;
KEY_F = 70;
KEY_G = 71;
KEY_H = 72;
KEY_I = 73;
KEY_J = 74;
KEY_K = 75;
KEY_L = 76;
KEY_M = 77;
KEY_N = 78;
KEY_O = 79;
KEY_P = 80;
KEY_Q = 81;
KEY_R = 82;
KEY_S = 83;
KEY_T = 84;
KEY_U = 85;
KEY_V = 86;
KEY_W = 87;
KEY_X = 88;
KEY_Y = 89;
KEY_Z = 90;

KEY_PF1 = 112;
KEY_PF2 = 113;
KEY_PF3 = 114;
KEY_PF4 = 115;
KEY_PF5 = 116;
KEY_PF6 = 117;
KEY_PF7 = 118;
KEY_PF8 = 119;

[ads2]

Teclas Alt, Ctrl e Shift

Para atalho combinados nós usaremos os valores das teclas Atl, Ctrl ou Shift, que são 18, 17 e 16 respectivamente, combinados com qualquer outra tecla desejada para acionar um evento. Para estas teclas usaremos o evento Keydown, veja um exemplo do uso do comando Ctrl+Enter:

Agora você pode mudar os valores das teclas no código para testar outras combinações. Até a próxima!
[ads1]

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

6 respostas

Deixe uma resposta

Seu e-mail não será publicado.