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]

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

7 Resultados

  1. Hey, thanks for the post.Really thank you! Great.

  2. This is one awesome post.Thanks Again. Cool.

  3. Enjoyed every bit of your blog post.Much thanks again. Really Cool.

  4. I am so grateful for your blog post.Thanks Again. Keep writing.

  5. augusto araujo disse:

    showwwwww

  1. 25 de janeiro de 2016

    Google

    We came across a cool website which you could possibly appreciate. Take a search in case you want.

  2. 24 de fevereiro de 2016

    Google

    We came across a cool internet site which you may well appreciate. Take a appear if you want.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *