web-dev-qa-db-fra.com

Comment obtenir un événement jquery .val () APRES une pression sur une touche?

J'ai eu:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

Désormais, l’alerte renvoie toujours la valeur AVANT que l’on appuie sur la touche (par exemple, le champ est vide, je tape "a" et l’alerte me donne "". Ensuite, je tape "b" et l’alerte me donne "a" ...). Mais je veux la valeur APRÈS la pression sur une touche - comment puis-je faire cela?

Arrière-plan: j'aimerais activer un bouton dès que le champ de texte contient au moins un caractère. Donc, je lance ce test sur chaque événement de frappe au clavier, mais en utilisant la valeur renvoyée val (), le résultat est toujours en retard. Utiliser l'événement change () n'est pas une option pour moi, car le bouton est désactivé jusqu'à ce que vous quittiez la zone de texte. S'il y a une meilleure façon de le faire, je suis heureux de l'entendre!

javascriptjqueryeventsformsjavascript-events
96
Jörg Brenninkmeyer

Remplacez keypress par keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypress est déclenché lorsque la touche est enfoncée, keyup est déclenché lorsque la touche est relâchée.

143
Hooray Im Helping

Surpris que personne n'ait mentionné l'événement js "input":

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Conseillé.

https://developer.mozilla.org/en-US/docs/Web/Events/input

55
billynoah

au lieu d'appuyer sur la touche, utilisez keyup.

9
Kris van der Mast

Sinon, vous pouvez utiliser l'événement keydown avec un délai d'expiration de 0.

De cette façon, les modifications seront appliquées instantanément, au lieu d'être appliquées lorsque l'utilisateur cesse de tenir la clé.

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});
5
David Oliveros

Essayez quelque chose comme ça:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

Cela introduit simplement un délai d’attente de sorte que, une fois la boucle d’événement "pression" terminée, votre code s’exécute presque immédiatement après. Un intervalle aussi court (même s’il a été arrondi par le navigateur) ne sera pas perceptible.

edit - ou vous pourriez utilisez "keyup" comme tout le monde le dit, bien que sa sémantique soit différente.

4
Pointy

Vous voudrez peut-être connecter un gestionnaire d'événements onchange au lieu d'utiliser l'un des événements clés.

$(someTextInputField).change(function() {
    alert($(this).val());
});

En utilisant Edit > Paste ou un clic droit puis Coller déclenchera un événement de modification, mais pas un événement clé. Remarque certains les navigateurs peuvent simuler un événement clé sur une pâte (bien que je n'en connaisse aucun) mais vous ne pouvez pas compter sur ce comportement.

4
Stephen P