Menu

Javascript: manipulação dos controles do teclado

FRBR
Faça uma pergunta
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.


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.
Jean-François Pillou

Jean-François Pillou - Fundador do CCM
Mais conhecido como Jeff, Jean-François Pillou é o fundador do CommentCaMarche.net. Ele também é CEO do CCM Benchmark e diretor digital do Grupo Figaro.

Mais informações sobre a equipe do CCM

Veja também