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]