jQuery erhält nach Tastendruck einen Eingabewert

Ich habe folgende Funktion:

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

Aus irgendeinem Grund erhalte ich beim ersten Tastendruck eine leere Zeichenfolge im Konsolenprotokoll.

Dies liegt daran, dass keypressEreignisse ausgelöst werden, bevor das neue Zeichen valuezum Element hinzugefügt wird (das erste keypressEreignis wird also ausgelöst, bevor das erste Zeichen hinzugefügt wird, während das valuenoch leer ist). Sie sollten keyupstattdessen verwenden, das ausgelöst wird, nachdem der Charakter hinzugefügt wurde.

Beachten Sie, dass es kein guter Grund ist, ein Element mit einem Namen zu haben, der mit dem eines anderen Elements #dSuggestidentisch ist , wenn Ihr Element dasselbe ist, wie input:text[name=dSuggest]Sie diesen Code erheblich vereinfachen können (und wenn dies nicht idder Fall ist).

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

Da mir klar wird, dass dies ein ziemlich alter Beitrag ist, werde ich trotzdem eine Antwort geben, da ich mit dem gleichen Problem zu kämpfen hatte.

Sie sollten "input"stattdessen das Ereignis verwenden und sich bei der .onMethode registrieren . Dies ist schnell - ohne Verzögerung keyupund löst das fehlende neueste Tastendruckproblem, das Sie beschreiben.

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

Demo hier

Verwenden Sie .keyupanstelle von Tastendruck.

Verwenden Sie auch $(this).val()oder nur, this.valueum auf den aktuellen Eingabewert zuzugreifen.

DEMO hier

Informationen zu .keypressjQuery-Dokumenten,

Das Tastendruckereignis wird an ein Element gesendet, wenn der Browser Tastatureingaben registriert. Dies ähnelt dem Keydown-Ereignis, außer bei Schlüsselwiederholungen. Wenn der Benutzer eine Taste drückt und hält, wird einmal ein Keydown-Ereignis ausgelöst, für jedes eingefügte Zeichen werden jedoch separate Tastendruckereignisse ausgelöst. Darüber hinaus lösen Modifizierertasten (z. B. Umschalttasten) Tastendruckereignisse aus, jedoch keine Tastendruckereignisse.

Sie müssen den Ausführungsthread unterbrechen, damit die Eingabe aktualisiert werden kann.

  $(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);
       });
  });

Dies liegt daran, dass ein KeypressEreignis ausgelöst wird, bevor das neue Zeichen hinzugefügt wird. Verwenden Sie stattdessen das Ereignis 'keyup', das in Ihrer Situation perfekt funktioniert.

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

Ich möchte dem hinzufügen, wenn Sie viele Textfelder haben und dasselbe für ihr Keyup-Ereignis tun müssen, können Sie ihnen einfach eine gemeinsame CSS-Klasse (z. B. CommonCss) geben und ein Keyup-Ereignis wie dieses anwenden.

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

Dadurch wird Ihr Code erheblich reduziert, da Sie nicht für jedes Textfeld ein Schlüsselereignis nach ID anwenden müssen.

Ich suchte nach einem ES6-Beispiel (damit es an meinem Linter vorbeikommt). Also für andere Leute, die dasselbe suchen:

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

Ich würde auch keyup verwenden, weil Sie den aktuellen Wert erhalten, der ausgefüllt wird.

Verwenden Sie einfach eine Zeitüberschreitung, um Ihren Anruf zu tätigen. Das Timeout wird aufgerufen, wenn der Ereignisstapel beendet ist (dh nachdem das Standardereignis aufgerufen wurde).

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

Ich denke, was Sie brauchen, ist der folgende Prototyp

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

jQuery erhält nach Tastendruck einen Eingabewert

https://www.tutsmake.com/jquery-keypress-event-detect-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>