it-swarm-eu.dev

Comment prendre la saisie au clavier en JavaScript?

Je veux prendre la saisie au clavier en JavaScript, où les touches fléchées, lorsqu'elles sont enfoncées, entraîneront le changement de forme d'une forme particulière. Comment puis-je prendre l'entrée d'une des clés en JavaScript?

30
Hick

Vous pouvez le faire en enregistrant un gestionnaire d'événements sur le document ou tout élément sur lequel vous souhaitez observer les frappes et examiner les propriétés clés liées à l'événement objet .

Exemple qui fonctionne dans les navigateurs FF et Webkit:

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

[~ # ~] démo [~ # ~]

73
Felix Kling

Si vous effectuez cette opération dans un navigateur, vous pouvez capturer les événements du clavier.

  • touche Bas
  • appuyez sur la touche
  • keyup

Peut tous être écoutés sur des nœuds HTML dans la plupart des navigateurs.

Webkit prend également en charge ...

  • saisie de texte

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

6
ocodo

Vous devez enregistrer un gestionnaire d'événements sur la fenêtre ou tout élément sur lequel vous souhaitez observer les frappes et utiliser la norme valeurs de clé au lieu de keyCode. Ce code modifié de MDN répondra à la touche enfoncée lorsque les touches fléchées gauche, droite, haut ou bas sont enfoncé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
6
exd5cxd4

Utilisez JQuery keydown événement.

$(document).keypress(function(){
    if(event.which == 70){  //f
        console.log("You have payed respect");
    }
});

Dans JS; les touches du clavier sont identifiées par Javascript keycodes

1
mondlos