2010-12-11 4 views
25

Je veux prendre la saisie au clavier en JavaScript, où les touches fléchées, une fois pressées, vont entraîner le changement de forme d'une forme particulière. Comment puis-je prendre l'entrée de l'une des clés en JavaScript?Comment saisir des données au clavier en JavaScript?

+2

Est-ce à faire dans un navigateur? Si c'est le cas, vous pouvez capturer des événements de clavier. – ocodo

+1

ouais sur un navigateur – Hick

Répondre

56

Vous pouvez le faire par registering an event handler sur le document ou tout élément sur lequel vous voulez observer les frappes de touches et examiner le key related properties of the event object.

Exemple qui fonctionne dans les navigateurs FF et basés sur Webkit:

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

DEMO

+1

L'équivalent IE serait une bonne chose à ajouter. –

+2

theres tout ce que je peux faire pour capturer Backspace mais empêcher le navigateur de "revenir"? –

+0

@Vitimtk: Désolé, je n'ai pas vraiment le temps maintenant, mais jetez un oeil à ces questions: http://stackoverflow.com/search?q=javascript+disable+backspace+navigation –

6

Si vous faites cela dans un navigateur, vous pouvez capturer des événements de clavier.

  • keydown
  • keypress
  • keyup

tous peuvent être écoutés sur des noeuds HTML dans la plupart des navigateurs.

Webkit soutient aussi ...

  • textInput

Voir pour plus de détails .. http://unixpapa.com/js/key.html

1

Vous devez enregistrer un gestionnaire d'événements sur la fenêtre ou tout autre élément que vous voulez Observez les frappes de touches et utilisez la norme key values au lieu de keyCode. Ce code modifié de MDN répondra à KEYDOWN lorsque la gauche, la droite, le haut ou vers le bas les touches fléchées sont pressées:

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

Questions connexes