jQuery obtient la valeur d'entrée après une pression sur une touche

Question

J'ai la fonction suivante:

 $(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});
 

Pour une raison quelconque, lors de la première pression de touche, je reçois une chaîne vide dans le journal de la console.

Answer 1

Réalisant qu'il s'agit d'un article plutôt ancien, je vais quand même répondre, car je me débattais avec le même problème.

Vous devez plutôt utiliser l'événement "input" et vous inscrire avec la méthode .on . C'est rapide - sans le décalage de keyup et résout le dernier problème de frappe manquant que vous décrivez.

 $('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});
 

Démo ici

Answer 2

C'est parce qu' keypress les événements sont déclenchés avant le nouveau caractère est ajouté à l' value de l'élément (donc la première keypress événement est déclenché avant le premier caractère est ajouté, alors que l' value est toujours vide). Vous devez utiliser keyup au lieu de cela, qui est déclenché après le personnage a été ajouté.

Notez que, si votre élément #dSuggest est le même que input:text[name=dSuggest] vous pouvez simplifier ce code considérablement (et si elle n'est pas, d'avoir un élément avec un nom qui est le même que l' id d'un autre élément n'est pas une bonne idée).

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Answer 3

Utiliser .keyup , au lieu de la touche.

Également utiliser $(this).val() ou juste this.value pour accéder à la valeur d'entrée.

DÉMO ici

Infos sur .keypress de jQuery docs,

L'événement keypress est envoyé à un élément lorsque le navigateur enregistre la saisie au clavier. Ceci est similaire à l'événement keydown, sauf dans le cas de la clé de répétitions. Si l'utilisateur appuie et est titulaire d'une clé, d'un keydown l'événement est déclenché une fois, mais distincte de pression de touche événements sont déclenchés pour chaque caractère inséré. En outre, les touches de modification (comme Maj) déclenchent les événements keydown, mais pas les événements de pression de touche.

Answer 4

Vous devez interrompre le thread d'exécution pour permettre à l'entrée de se mettre à jour.

   $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });