Comment obtenir le texte d'une zone de saisie au cours de onKeyPress?

Je suis en train de mettre le texte dans une zone de texte que l'utilisateur tape dans l'il (jsfiddle aire de jeux):

JS:

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

HTML:

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

Le code s'exécute sans erreur, sauf que le valeur de la input text boîte, au cours de onKeyPress est toujours la valeur avant le changement:

Comment obtenir le texte d'une zone de saisie au cours de onKeyPress?

Question: Comment puis-je obtenir le texte d'une zone de texte au cours de onKeyPress?

Bonus Chatter

Il y a trois événements liés à "l'utilisateur tape" dans le DOM HTML:

  • onKeyDown
  • onKeyPress
  • onKeyUp

Dans Windows, de l'ordre de WM_Key messages devient important lorsque l'utilisateur appuie sur une touche et la touche commence à se répéter:

  • WM_KEYDOWN('a') - l'utilisateur a poussé vers le bas de la Un clé
  • WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
  • WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
  • WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
  • WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
  • WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
  • WM_KEYUP('a') - l'utilisateur a publié le Un clé

Entraînera cinq caractères qui apparaissent dans un texte de contrôle: aaaaa

Le point important étant que vous répondez à la WM_CHAR message, celui qui se répète. Sinon, vous manquez des événements lorsqu'une touche est enfoncée.

Dans HTML les choses sont légèrement différentes:

  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyDown
  • onKeyPress
  • onKeyUp

Html offre une KeyDown et KeyPress chaque répétition des touches. Et le KeyUp événement n'est généré lorsque l'utilisateur relâche la touche.

La vente à emporter

  • Je peut répondre à onKeyDown ou onKeyPress, mais les deux sont toujours levé avant le input.value a été mis à jour
  • Je ne peux pas répondre à onKeyUp, car il n'est pas le texte dans la zone de texte change.

Question: Comment puis-je obtenir le texte d'une zone de texte au cours de onKeyPress?

Bonus De Lecture

  • Je crois que vous devez ajouter l'actuel touche à la valeur avant de la retourner; la valeur est mise à jour sur keyUp, mais les données sont disponibles pour vous sur keyDown.
  • La clé en place fonctionne pour moi, vous n'avez pas besoin jQ pour quelque chose comme ça, sauf si vous voulez ajouter la météorisation
  • il suffit seulement onKeyUp pour votre tâche
  • Seulement onKeyUp n'est pas de montrer les évolutions dans la zone de texte comme ils se produisent.
  • si vous voulez maintenez enfoncée n'importe quelle touche et obtenez le résultat dans la zone de texte de cause, vous devez utiliser à la fois onKeyPress et onKeyDown événements Jonathan M le violon d', mais si vous voulez obtenir le résultat sans appuyer sur les touches, il suffit seulement onKeyUp mon violon.
InformationsquelleAutor Ian Boyd | 2012-07-06