As “hotkeys” – ou atalhos de teclado – são um recurso muito legal e pouco utilizado em páginas da web. Aliás, pouca gente usa os atalhos em qualquer programa. Na maior parte das vezes o usuário não passa do Ctrl + X/C/V (recortar, copiar e colar). Mas eles são verdadeiros “atalhos”, cortando, muitas vezes, grande parte do caminho que teríamos que percorrer para chegar ao comando desejado.
Além de, dentro dos preceitos da web 2.0, ser um recurso de usabilidade bastante desejável. O Google (símbolo máximo da tal de web 2.0), por exemplo, oferece alguns atalhos para comandos na interface do Gmail.
O HTML nos oferece uma forma nativa de fazer isso: a propriedade accesskey. Originalmente aplicável em a, area, button, input, label, legend e textarea, depois foi liberado para todos os elementos renderizáveis. Usa-se então uma tecla (definida em accesskey) combinada com [Alt] ou [Ctrl], dependendo do browser, para mover o foco para o elemento, mas não funciona a contento. Depois, queremos executar comendos Javascript e não apenas mover o foco.
Construí então um sisteminha para capturar e reconhecer esses eventos, transformando-os em strings facilmente interpretáveis, como “CTRL+Q” ou “SHIFT+CTRL+B”. Acabei por fazer uma função que retorna um objeto contendo quatro informações: a string em si, o número da tecla pressionada e dois valores boleanos para saber se as teclas [Ctrl] e [Shift] estão pressionadas. O usuário deve então criar uma função para receber e interpretar esse objeto, executando as ações relacionadas. Vamos ao código.
Começamos criando duas variáveis: isIE, que diz se estamos no IE, e hotKeysOk, que é inicializada com o valor false e irá nos dizer se há uma função definida para executar os comandos.
hotKeysOk = false;
Bem, vamos então à função getHotKeys. É ela que detecta a ação de pressionar uma ou mais teclas e lê a combinação, transformando em texto e executando a função do usuário – que veremos adiante. Ao executar a função do usuário, enviará como parâmetro um objeto com a seguinte estrutura:
“str”: “string de retorno (como CTRL+I)”, // string
“code”: “número da tecla (keyCode)”, // nunber
“shift”: “se true, Shift esta pressionado”, // boolean
“ctrl”: “se true, Ctrl esta pressionado” // boolean
}
A função em si:
// capturando a keycode e as teclas Shift e Ctrl
var key = isIE ? event.keyCode : e.charCode;
var ctrl = isIE ? event.ctrlKey : e.ctrlKey;
var shif = isIE ? event.shiftKey : e.shiftKey;
var ret = ‘’;
// elimina caracteres acentuados e outros
if(key > 126) return true;
if(shif) ret += ‘SHIFT+’;
if(ctrl) {
ret += ‘CTRL+’;
// se Ctrl está pressionado,
// o IE muda o keycode…
if(isIE) key += 96;
}
// recuperando o caracter literal
ret += String.fromCharCode(key).toUpperCase();
// retirando o ‘SHIFT+’ da string em
// caso de caracteres especiais
var er = /[\”!@#\$%¨&\*\(\)\_+\^`\{\}\|\:\?]/;
if(er.test(ret.charAt(ret.length – 1)))
ret = ret.replace(/SHIFT\+/,’’);
// se por algum motivo a string
// não estiver correta, esvazia
if(!(/^(SHIFT\+)?(CTRL\+)?.$/.test(ret))) ret = ‘’;
// se a função do usuário está setada, executa
if(hotKeysOk)
execHotKeys({ ’str’: ret, ‘code’: key, ‘upper’: shif, ‘ctrl’: ctrl });
}
Ok, a função está toda comentada, mas e a execHotKeys? cadê?
Pois é, a função abaixo foi o meu modo de resolver isso. Crio a execHotKeys on-the-fly, a partir de uma função enviada como parâmetro à setHotKeysFunction. Ao fazer isso, podemos setar hotKeysOk para true. A função de interpretação já existe e a getHotKeys já sabe o seu nome: execHotKeys.
if(!func || typeof(func) != ‘function’)
return true;
else { hotKeysOk = true; execHotKeys = func; }
}
Só faltou agora a função para interpretar os comandos de teclado e executá-los, a mesma recebida como parâmetro na função aí em cima. Essa funçãodeve estar pronta para receber e interpretar o objeto recebido. No nosso exemplo, ela apenas dá um alert mostrando os dados do objeto, mas podemos criar várias estratégias para reconhecer os comandos a partir dessas informações enviadas à função.
Esta é a função que está funcionando na página de exemplo:
function myHotKeys(keyInfo) {
alert(’str: ‘+keyInfo.str+
’\ncode: ‘+keyInfo.code+
’\nupper: ‘+keyInfo.upper+
’\nctrl: ‘+keyInfo.ctrl);
}
Mas poderíamos fazer algo como isso:
function myHotKeys(keyInfo) {
switch(keyInfo.str) {
case “CTRL+G”: /* comandos */ break;
case “SHIFT+CTRL+B”: /* comandos */ break;
case “A”: /* comandos */ break;
case “%”: /* comandos */ break;
case “5″: /* comandos */ break;
}
}
Tudo bem, mas e para fazer isso funcionar?
Basta adicionar as duas linhas abaixo, definindo comportamentos para dois eventos na nossa janela: ao carregar a página (window.onload) definimos a nossa função myHotKeys (que irá executar os comandos) com setHotKeysFunction e ao pressionar uma tecla (document.onkeypress), chamamos a getHotKey que fará o resto do trabalho.
setHotKeysFunction(myHotKeys);
}
document.onkeypress = getHotKey;
Atenção, a propriedade str no objeto enviado à sua função irá retratar a combinação de teclas como mostrado abaixo.
- A letras sempre são mostradas em maiúsculas, o que diferencia das minúsculas é a presença do SHIFT.
- Os caracteres não alfabéticos suprimem a substring SHIFT+ da string de retorno, mostrando apenas o próprio caracter
- Caracteres não alfabéticos não funcionam em combinação com Ctrl.
- Caracteres acentuados, como “Ç”, não são aceitos.
- As combinações que correspondem a atalhos do navegador, como Ctrl + A devem ser evitadas. O que acontece:
- no IE são desabilitados
- na família Mozilla não impedem a execução da funcionalidade correspondente – as duas coisas acontecem
Tabela com alguns exemplos:
| a | A |
| A | SHIFT+A |
| b | B |
| Ctrl + t | CTRL+T |
| Ctrl + T | SHIFT+CTRL+T |
| $ | $ |
| * | * |
| 7 | 7 |
Veja aqui uma página de exemplo
É isso aí, abraço, Cau.
Humm, solução interessante Cau.
textareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextareatextarea