Jak wprowadzić dane z klawiatury w języku JavaScript?

Question

Chcę wziąć dane wejściowe z klawiatury w JavaScript, gdzie klawisze strzałek, po naciśnięciu, spowodują zmianę kształtu określonego kształtu. Jak mogę wprowadzić dane wejściowe któregoś z kluczy w JavaScript?

Answer 1

Możesz to zrobić przez registering an event handler na dokumencie lub dowolnym elemencie, w którym chcesz obserwować naciśnięcia klawiszy i zbadać numer key related properties of the event object.

Przykład, który działa w FF i WebKit oparte na przeglądarkach:

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

Jeśli robisz to w przeglądarce, można przechwytywać zdarzenia klawiatury.

• keyDown
• przyciśnięcie
• keyup

mogą być słuchał na węzłach HTML w większości przeglądarek.

Webkit obsługuje również ...

• textInput

Zobacz więcej szczegółów .. http://unixpapa.com/js/key.html

Answer 3

Należy zarejestrować obsługi zdarzeń w oknie lub jakiegokolwiek elementu, który chcesz obserwuj naciśnięcia klawiszy i używaj standardu key values zamiast keyCode. Ten zmodyfikowany kod z MDN odpowie na keyDown gdy lewo, w prawo, w górę lub w dół klawiszy strzałek są naciskane:

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