Essa dica tem por objetivo fazer com que você descubra como controlar os principais eventos no Javascript. Isso permitirá que você atribua comportamentos específicos a determinadas teclas.
Quais são as técnicas necessárias
Antes de tudo, você deve conhecer a linguagem Javascript e o que são os eventos dessa linguagem de programação.
Eventos do teclado
Veja a lista dos eventos possíveis de um teclado no Javascript:
Onkeypress: quando uma tecla é ativada;
Onkeydown: quando uma tecla é pressionada;
Onkeyup: quando uma tecla é solta.
É importante saber a diferença entre, de um lado, o
Onkeypress e, do outro,
Onkeydown e
Onkeyup. O Onkeypress será chamado duas vezes quando você pressionar uma tecla, ou seja, quando o botão é pressionado e quando o botão é solto.
Então, se você atribuir um comportamento e/ou tratamento a esse evento, saiba que ele será efetuado duas vezes (a menos que você verifique o estado da tecla diretamente no código Javascript).
Observação: os objetos HTML não incluem funções do tipo fone de ouvido. Para isso, informe-se na internet antes de entrar de cabeça no seu código.
O objeto Evento Javascript
Depois de colocar o fone de ouvido, você tem que
definir os tratamentos atribuídos ao evento. Na maioria das vezes, você gostaria de poder controlar a fonte do evento, porque com o evento você sabe que se trata de um evento de teclado, mas não exatamente qual tecla foi ativada.
O objeto
Evento no Javascript está aí para isso. Ele reúne as principais informações do teclado e do mouse. Você pode obter facilmente a descrição desse objeto na internet, através das palavras-chave
javascript object event
.
Quanto aos controles do teclado, vamos focar nas três seguintes propriedades:
keyCode: código numérico da tecla ativada;
AltKey: booleano verdadeiro se a tecla
Alt for ativada;
CtrlKey: booleano verdadeiro se a tecla
Ctrl for ativada.
No JavaScript, o objeto
Evento não é implementado da mesma forma por todos os navegadores. Por isso, é importante poder distinguir os diferentes casos possíveis e recuperar este objeto de maneira
universal:
Internet Explorer:
window.event
;
Outro browser: por meio de uma variável
Evento passada automaticamente pelo navegador durante um evento. Essa variável deve ser incluída como parâmetro de suas funções de processamento (veja o último exemplo).
Propriedade keyCode e a lista dos valores
Essa propriedade permite
recuperar o valor integral da tecla pressionada. Logo, trata-se de um número. Veja a lista de valores de teclas mais comuns:
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;
Propriedades AltKey e CtrlKey
Essas duas propriedades são
booleanos que indicarão se as teclas
Alt ou
Ctrl estão ativas ou não.
Ouvir as setas de direção em uma página
Veja um exemplo completo de implementação de uma escuta de teclado em uma página web.
Página Web
Veja o
código de uma página voluntariamente simples:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="keyboard.js"></SCRIPT>
</HEAD>
<BODY>
<script language="javascript">
document.onkeydown = applyKey;
</script>
</BODY>
</HTML>
Aqui, vamos nos interessar pela parte em negrito. Ela permite aplicar a função Javascript
applyKey (definida no arquivo de script) ao evento
onkeydown, ele mesmo aplicado ao objeto
documento, o que significa toda a página atual.
As funções do Javascript
Veja aqui, função por função, o código do arquivo
keyboard.js. O conteúdo completo é apresentado mais abaixo, na seção
Anexos.
Função applyKey
function applyKey (_event_){
// --- Retrieve event object from current web explorer
var winObj = checkEventObj(_event_);
var intKeyCode = winObj.keyCode;
var intAltKey = winObj.altKey;
var intCtrlKey = winObj.ctrlKey;
// 1° --- Access with [ALT/CTRL+Key]
if (intAltKey || intCtrlKey) {
if ( intKeyCode == KEY_RIGHT || intKeyCode == KEY_LEFT ){
// --- Display Message
alert("Hello with ALT/CTRL !");
// 3° --- Map the keyCode in another keyCode not used
winObj.keyCode = intKeyCode = REMAP_KEY_T;
winObj.returnValue = false;
return false;
}
}
// 2 ° --- Access without [ALT/CTRL+Key]
else {
if ( intKeyCode == KEY_RIGHT || intKeyCode == KEY_LEFT ){
// --- Display Message
alert("Hello !");
// 3° --- Map the keyCode in another keyCode not used
winObj.keyCode = intKeyCode = REMAP_KEY_T;
winObj.returnValue = false;
return false;
}
}
}
Essa é a função mais complexa. Vamos dissecá-la passo a passo. Em primeiro lugar, devemos recuperar o objeto
Evento de acordo com o tipo de navegador. Para isso, vamos invocar a função
checkEventObj, cujo código é dado mais abaixo:
Em seguida, recuperaremos os valores das propriedades
keyCode,
AltKey e
CtrlKey desse objeto
Evento e os armazenaremos nas variáveis locais.
Depois, vamos distinguir os casos que queremos. Nesse exemplo, vários controles são utilizados para separar os casos em que a tecla
Alt ou
Ctrl foi ativada (Caso n° 1) e a tecla
Alt<bold> ou <bold>Ctrl não foi ativada (Caso n° 2).
Finalmente, vamos aplicar um tratamento nos casos em que apenas as teclas
Key_right e
Key_left foram ativadas (respectivamente setas para a direita e para a esquerda do teclado). Esses dois valores correspondem aos definidos na lista de valores numéricos das teclas de um teclado padrão (ver mais abaixo).
Para concluir, você pode ver que, após o tratamento específico de cada tecla (uma advertência), realizaremos um
mapping dessas teclas. Essa parte é muito importante. Ao interceptar um evento de teclado dessa maneira, você deverá inibi-lo porque os navegadores definem comportamentos padrão em determinadas teclas, em suas páginas. Se você não redirecionar, essas ações serão desencadeadas depois das suas, o que pode ter efeitos indesejáveis, dependendo das teclas e dos navegadores.
Função checkEventObj
Essa função, dependendo do tipo do navegador, retorna o objeto
Evento apropriado:
function checkEventObj ( _event_ ){
// --- IE explorer
if ( window.event )
return window.event;
// --- Netscape and other explorers
else
return _event_;
}
Anexos
Código completo do arquivo
keyboard.js:
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;
REMAP_KEY_T = 5019;
function checkEventObj ( _event_ ){
// --- IE explorer
if ( window.event )
return window.event;
// --- Netscape and other explorers
else
return _event_;
}
function applyKey (_event_){
// --- Retrieve event object from current web explorer
var winObj = checkEventObj(_event_);
var intKeyCode = winObj.keyCode;
var intAltKey = winObj.altKey;
var intCtrlKey = winObj.ctrlKey;
// --- Access with [ALT/CTRL+Key]
if (intAltKey || intCtrlKey) {
if ( intKeyCode == KEY_RIGHT || intKeyCode == KEY_LEFT ){
// --- Display Message
alert("Hello with ALT/CTRL !");
// --- Map the keyCode in another keyCode not used
winObj.keyCode = intKeyCode = REMAP_KEY_T;
winObj.returnValue = false;
return false;
}
}
// --- Access without [ALT/CTRL+Key]
else {
if ( intKeyCode == KEY_RIGHT || intKeyCode == KEY_LEFT ){
// --- Display Message
alert("Hello !");
// --- Map the keyCode in another keyCode not used
winObj.keyCode = intKeyCode = REMAP_KEY_T;
winObj.returnValue = false;
return false;
}
}
}
Foto: © Pixabay.