¿Cómo tomar la entrada del teclado en JavaScript?

Question

Quiero tomar la entrada del teclado en JavaScript, donde las teclas de flecha, cuando se presiona, dará como resultado el cambio de forma de una forma en particular. ¿Cómo tomo la entrada de alguna de las claves en JavaScript?

Answer 1

Puede hacerlo por registering an event handler en el documento o en cualquier elemento que desee observar y explorar el key related properties of the event object.

Ejemplo que funciona en los navegadores FF y basado en WebKit:

document.addEventListener('keydown', function(event) { 
    if(event.keyCode == 37) { 
     alert('Left was pressed'); 
    } 
    else if(event.keyCode == 39) { 
     alert('Right was pressed'); 
    } 
}); 

DEMO

Answer 2

Si usted está haciendo esto en un navegador, puede capturar los eventos de teclado.

• keydown
• pulsación de tecla
• keyup

todos podemos ser escuchados en los nodos HTML en la mayoría de los navegadores.

Webkit también soporta ...

• textInput

Ver para más detalles .. http://unixpapa.com/js/key.html

Answer 3

Debe registrar un controlador de eventos en la ventana o cualquier elemento que desea Observe las pulsaciones de teclas y utilice el estándar key values en lugar de keyCode. Este código modificado de MDN responderá a keyDown cuando la izquierda, derecha, arriba o abajo se presionan las teclas de flecha:

window.addEventListener("keydown", function (event) { 
 
    if (event.defaultPrevented) { 
 
    return; // Do nothing if the event was already processed 
 
    } 
 

 
    switch (event.key) { 
 
    case "ArrowDown": 
 
     // code for "down arrow" key press. 
 
     break; 
 
    case "ArrowUp": 
 
     // code for "up arrow" key press. 
 
     break; 
 
    case "ArrowLeft": 
 
     // code for "left arrow" key press. 
 
     break; 
 
    case "ArrowRight": 
 
     // code for "right arrow" key press. 
 
     break; 
 
    default: 
 
     return; // Quit when this doesn't handle the key event. 
 
    } 
 

 
    // Cancel the default action to avoid it being handled twice 
 
    event.preventDefault(); 
 
}, true); 
 
// the last option dispatches the event to the listener first, 
 
// then dispatches event to window