jQuery erhält nach Tastendruck einen Eingabewert

129

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.

Oder Weinberger
quelle

Antworten:

156

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");
});
einsamer Tag
quelle
2
Funktioniert, aber mit jquery 2.x out ist dies jetzt veraltet, da die unten stehende Antwort mit on und input der beste Weg ist, dies jetzt zu tun.
Piotr Kula
1
@ppumkin: Nur weil jQuery 2 nicht verfügbar ist, müssen die Benutzer IE8 und niedriger nicht unterstützen. Und ich sehe in den Dokumenten nichts, was auf eine tatsächliche Unterstützung für den inputEreignistyp hindeutet .
Keks Monster
7
Sie korrigieren, sie sollten aufhören, IE zu unterstützen, Punkt. Die meisten "Problemumgehungen" in jQuery 1.x sind für IE, daher sollte es wirklich in jQuerIE umbenannt werden.
Piotr Kula
187

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

Frederik Gottlieb
quelle
26
Dies sollte als richtige Antwort markiert werden - die Eingabe löst möglicherweise das Problem mit fehlenden Zeichen, ist jedoch problematisch, um festzustellen, ob das Zeichen tatsächlich geschrieben wurde (und der Schlüssel war beispielsweise nicht "Tab" oder "Home"). +1 für Sie
Nashi
Das Problem ist, dass es in alten Browsern nicht unterstützt wird und IE9 nicht auf gelöschte Zeichen reagiert.
PhoneixS
33

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.

Selvakumar Arumugam
quelle
5
keyupist zu langsam, und eine Taste kann gedrückt und gehalten werden, ohne losgelassen zu werden, und es müssen Dinge geschehen. Besser keydownmit einer kleinen Zeitüberschreitung verwenden, damit sich der Wert tatsächlich ändert.
vsync
Der einzige Nachteil, den ich festgestellt habe, ist, dass der Benutzer nicht korrekt registriert wird, wenn er mehr als ein Tastaturzeichen gleichzeitig gedrückt hat.
vsync
5

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);
       });
  });
Parlament
quelle
1
keyupDie Verzögerung ist für einige Zwecke zu langsam und filtert auch keine Modifikatortasten automatisch. Das funktioniert bei mir eigentlich besser.
Albert Bori
beste Antwort. keyup - langsam und kann keine Zeichen wie @ mit zwei gedrückten Tasten abfangen.
Roma Rush
4

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.

Yogihosting
quelle
3

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.

MarvinVK
quelle
1

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)
});
Smonge
quelle
0

Ich denke, was Sie brauchen, ist der folgende Prototyp

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

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>  

Entwickler
quelle