web-dev-qa-db-fra.com

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

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 sur une touche, je reçois une chaîne vide dans le journal de la console.

jqueryjavascript-events
110
Or Weinberger

En effet, les événements keypress sont déclenchés avant le nouveau caractère est ajouté à la variable value de l'élément (le premier événement keypress est donc déclenché avant l'ajout du premier caractère, alors que la variable value est toujours vide). Vous devez utiliser keyup à la place, qui est déclenché après le caractère a été ajouté.

Notez que, si votre élément #dSuggest est identique à input:text[name=dSuggest], vous pouvez considérablement simplifier ce code (sinon, avoir un élément avec un nom identique à la 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");
});
136
lonesomeday

En 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. Ceci 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

165
gottlieb76

Utilisez .keyup au lieu de la pression de touche. 

Utilisez également $(this).val() ou juste this.value pour accéder à la valeur d’entrée actuelle.

DÉMO ici

Informations sur .keypress à partir de la documentation jQuery,

L'événement touche 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 répétition de touche. Si l'utilisateur appuie et maintient une touche enfoncée, une touche de raccourci événement est déclenché une fois, mais des événements de pression de touche distincts sont déclenchés pour chaque caractère inséré. De plus, des touches de modification (telles que Shift) déclenchent des événements de raccourci clavier mais pas des événements de pression de touche.

28
Selvakumar Arumugam

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);
       });
  });
5
parliament

Cela est dû au fait que l'événement Keypress est déclenché avant l'ajout du nouveau caractère. Utilisez plutôt l'événement 'keyup', qui fonctionnera parfaitement dans votre situation.

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

Je souhaite ajouter à cela que si vous avez plusieurs zones de texte et que vous devez faire la même chose lors de leur événement keyup, vous pouvez simplement leur donner une classe css commune (par exemple, commoncss) et appliquer un événement keyup comme celui-ci.

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

cela réduira considérablement votre code car vous n'avez pas à appliquer l'événement keyup par identifiant pour chaque zone de texte.

3
yogihosting

Je pense que ce dont vous avez besoin est le prototype ci-dessous 

$(element).on('input',function(){code})
0
Zuckerberg

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

https://www.tutsmake.com/jquery-keypress-event-dentect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 
<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>
0
Devendra Dode

Je cherchais un exemple ES6 (pour que mon linter puisse passer).

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

J'utiliserais également keyup car vous obtenez la valeur actuelle renseignée.

0
MarvinVK

Utilisez simplement un délai d'attente pour passer votre appel. le délai d'attente sera appelé lorsque la pile d'événements sera terminée (c'est-à-dire après l'appel de l'événement par défaut)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});
0
Smonge