Javascript - Manipulação dos controles do teclado

Julho 2017


Esta dica tem por objetivo fazer com que você descubra a (ou pelo menos uma) forma de controlar os principais eventos no javascript.

Isso permitirá que você controle/atribua os comportamentos específicos a determinadas teclas do teclado.

Técnicas pré-requisitas


Antes de tudo, você deve conhecer os seguintes domínios:

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"


Para obter mais informações sobre os eventos e sua gestão, você pode consultar o tópico javascript event

É importante saber a diferença entre, de um lado o "Onkeypress", e de outro, "Onkeydown"e "Onkeyup"! O "Onkeypress" será chamado duas vezes quando você pressionará uma tecla: quando o botão é apertado e solto. Então, se você atribuir um comportamento e/ou tratamento a este evento, saiba que ele será efetuado duas vezes, quando você pressionará a sua tecla. (A menos que você verifique o estado da tecla (para cima ou para baixo) diretamente no código javascript)


Cuidado, porém, todos os objetos HTML não incluem estas funções do tipo fone de ouvido, para isso, informe-se na net antes de entrar de cabeça no seu código. (A lista também é fornecido na seção javascript event

O objeto `'evento'' Javascript


Depois de colocar o fone de ouvido, você tem que definir o(s) tratamento(s) atribuído(s) ao evento. Na maioria das vezes você quer poder controlar a fonte do evento, porque, claro, 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. Trata-se de um objeto que 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 concentrar-nos em particular, às três seguintes propriedades:
  • keyCode: código numérico da tecla ativada
  • altKey: booleano verdadeiro se a tecla ALT estiver ativada
  • ctrlKey: booleano verdadeiro se a tecla CRTL estiver ativada


No JavaScript, o objeto "evento"não é implementado da mesma forma, de um navegador para outro. Por isso, é importante poder distinguir os diferentes casos possíveis, e recuperar este objeto de maneira "universal".
  • Internet Explorer : window.event
  • Outra coisa: 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 exemplo final)

Propriedade keyCode e 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 booleanas, que indicarão se as teclas "ALT" ou "CTRL" estão ativas ou não.

Exemplo: 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> 


O arquivo de script "Keyboard.js" incluído na página será detalhado no próximo item.

Aqui nós vamos nos interessar à 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 quer dizer, 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, trata-se de 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.
  • Depois, 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" está ativada (Caso n° 1)
    • A tecla "ALT" ou "CTRL" não está ativada (Caso n° 2)
  • E, finalmente, vamos aplicar um tratamento nos casos em que apenas as teclas "KEY_RIGHT" e "KEY_LEFT" estão ativadas (respectivamente as setas direita e esquerda do teclado). Estes 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. Quando você interceptar desta maneira um evento de teclado, você deverá inibí-lo pela seguinte razão: 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; 
  } 
   
 } 
  
} 



Tradução feita por Lucia Maurity y Nouira

Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 6 de junho de 2011 às 08:28 por pintuda.
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.