Javascript: manipulação dos controles do teclado
Esta 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.
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, de outro, o 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 este 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 (a lista também é fornecido na dica dos Eventos do Javascript).
O objeto Evento no Javascript está aí para isso. Ele reúne as principais informações do teclado e do mouse. Você pode, facilmente, obter a descrição deste objeto na internet, através do Google e das seguintes palavras-chave: javascript objet 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:
Outro: por meio de uma variável Evento passada automaticamente pelo navegador durante um evento. Esta variável deve ser incluída como parâmetro de suas funções de processamento (veja o último exemplo).
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 no objeto documento, o que significa, toda a página atual.
Esta é 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, nós recuperaremos os valores das propriedades keyCode, AltKey e CtrlKey deste objeto Evento e os armazenaremos nas variáveis locais.
Depois, vamos distinguir os casos que queremos. Neste 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).
E, finalmente, vamos aplicar um tratamento nos casos em que apenas as teclas Key_right e Key_left foram ativadas (respectivamente as 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 (em 3°), você pode ver que, após o tratamento específico de cada tecla (uma advertência), nós realizaremos um mapping destas teclas. Esta parte é muito importante. Ao interceptar um evento de teclado desta 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.
Foto: © Pixabay.
- Quais são as técnicas necessárias
- Eventos do teclado
- O objeto Evento Javascript
- Ouvir as setas de direção em uma página
- As funções do Javascript
- Anexos
Quais são as técnicas necessárias
Antes de tudo, você deve conhecer os eventos e a linguagem Javascript.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, de outro, o 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 este 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 (a lista também é fornecido na dica dos Eventos do Javascript).
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, facilmente, obter a descrição deste objeto na internet, através do Google e das seguintes palavras-chave: javascript objet 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: por meio de uma variável Evento passada automaticamente pelo navegador durante um evento. Esta 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
Esta 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 web 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 no 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;
}
}
}
Esta é 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, nós recuperaremos os valores das propriedades keyCode, AltKey e CtrlKey deste objeto Evento e os armazenaremos nas variáveis locais.
Depois, vamos distinguir os casos que queremos. Neste 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).
E, finalmente, vamos aplicar um tratamento nos casos em que apenas as teclas Key_right e Key_left foram ativadas (respectivamente as 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 (em 3°), você pode ver que, após o tratamento específico de cada tecla (uma advertência), nós realizaremos um mapping destas teclas. Esta parte é muito importante. Ao interceptar um evento de teclado desta 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
Esta 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.
Veja também
- Como criar funções com teclas no javascript
- Evento teclado javascript
- Pressionar tecla javascript
- Como criar atalhos no teclado » Dicas - Windows 7
- Como criar um atalho teclado no Mac » Dicas - MacOS
- Alterar a atribuição de uma tecla do teclado » Dicas - Teclado
- Javascript - Criar uma popup » Dicas - Javascript
- Aprender a fazer emoticons [Resolvido] (Resolvido) » Fórum - Programação