Depois de publicada a tabela de Key Codes para javascript vamos aprender algumas formas mais avançadas para criar atalhos de interface para sites utilizando o teclado.
O exemplo simples já foi dado no post da tabela de keycodes, fiz um exemplo um pouco mais complexo que permite verificar quando duas teclas estão pressionadas, para criar atalhos para por exemplo salvar um post que o usuário está escrevendo com o CTRL+S, ou permitir a um usuário da internet utilizar o CTRL+O para abrir um documento…
O exemplo abaixo não utiliza nenhuma biblioteca e comentei as linhas para facilitar o entendimento, segue o código:
var pressedCtrl = false;
//Quando uma tecla for liberada verifica se é o CTRL para notificar que CTRL não está pressionado
document.onkeyup=function(e){
if(e.which == 17)
pressedCtrl =false;
}
// Quando alguma tecla for pressionada:
// Primeiro if - verifica se é o CTRL e avisa que CTRL está pressionado
// Segundo if - verifica se a tecla é o "s" (keycode 83) para executar a ação
document.onkeydown=function(e){
if(e.which == 17)
pressedCtrl = true;
if(e.which == 83 && pressedCtrl == true) {
//Aqui vai o código e chamadas de funções para o ctrl+s
alert("CTRL + S pressionados");
}
}
No caso acima utilizei uma variável "pressedCtrl" que controla quando a tecla CTRL está pressionada e só se este caso for true ele executará as ações dos atalhos.
Com jQuery fica quase a mesma coisa – agora sem os comentários.
var pressedCtrl = false;
$(document).keyup(function (e) {
if(e.which == 17)
pressedCtrl=false;
})
$(document).keydown(function (e) {
if(e.which == 17)
pressedCtrl = true;
if(e.which == 83 && pressedCtrl == true) {
//Aqui vai o código e chamadas de funções para o ctrl+s
alert("CTRL + S pressionados");
}
});
Com os exemplos simples acima é possível incrementar atalhos mais complexos de mais do que 2 teclas, e outras combinações de teclas também.
Agora vamos a um exemplo de atalho de navegação, controlar a paginação de um site pelas teclas direita e esquerda do teclado. O código abaixo utiliza a tecla da direita para redirecionar a página para a url do link <a> com id="next" e a tecla da esquerda para o link com id "prev".
$(document).ready(function(){
$("document").keyUp(function(e){
e.keyCode == 39;
window.location = $("#next").atrr("href");
});
$("document").keyUp(function(e){
e.keyCode == 37;
window.location = $("#prev").atrr("href");
});
});
Com um pouco de criatividade é possível aumentar a usabilidade do seu site utilizando estes atalhos – e para interface de intranets é possível melhorar bastante e além da usabilidade aumentar a produtiivdade dos usuários.
Referências
- Scottklarr – criando atalhos com javascript
- Ícaro Pablo – atalhos com jQuery
- Cambia Research – Char Codes do javascript