Eventos do teclado com JavaScript e Jquery
[ads2]
[dropcap]O[/dropcap]lá 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:
$(document).ready(function(){
$(document).keypress(function(e){
if(e.wich == 13 || e.keyCode == 13){
alert('A tecla ENTER foi pressionada');
}
})
})
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:
var pressedCtrl = false; //variável de controle
$(document).keyup(function (e) { //O evento Kyeup é acionado quando as teclas são soltas
if(e.which == 17) pressedCtrl=false; //Quando qualuer tecla for solta é preciso informar que Crtl não está pressionada
})
$(document).keydown(function (e) { //Quando uma tecla é pressionada
if(e.which == 17) pressedCtrl = true; //Informando que Crtl está acionado
if((e.which == 13|| e.keyCode == 13) && pressedCtrl == true) { //Reconhecendo tecla Enter
alert('O comando Crtl+Enter foi acionado')
}
});
Agora você pode mudar os valores das teclas no código para testar outras combinações. Até a próxima!
[ads1]
Hey, thanks for the post.Really thank you! Great.
This is one awesome post.Thanks Again. Cool.
Enjoyed every bit of your blog post.Much thanks again. Really Cool.
I am so grateful for your blog post.Thanks Again. Keep writing.
showwwwww