Javascript: manipulação dos controles do teclado
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.
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 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
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 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).
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.
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.
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 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.
Veja também
- Eventos de teclado javascript
- Eventos teclado javascript - Melhores respostas
- Teclado javascript - Melhores respostas
- Como colocar ° no teclado - Dicas - Suíte de escritório
- Teclado não funciona ✓ - Fórum - Hardware
- Como colocar @ no teclado do pc - Dicas - Teclado
- Teclado digitando letras vizinhas ✓ - Fórum - Hardware
- Teclas de aderencia - Dicas - Windows
Este documento, intitulado 'Javascript: manipulação dos controles do teclado', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.
Assine nossa newsletter!
