webentwicklung-frage-antwort-db.com.de

jQuery Eingabewert nach Tastendruck abrufen

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 bekomme ich beim ersten Tastendruck einen leeren String im Konsolenprotokoll.

110
Or Weinberger

Dies liegt daran, dass keypress-Ereignisse ausgelöst werden, bevor das neue Zeichen zur value des Elements hinzugefügt wird (das erste keypress-Ereignis wird ausgelöst, bevor das erste Zeichen hinzugefügt wird, während value noch leer ist). Verwenden Sie stattdessen keyup, das ausgelöst wird, nachdem das Zeichen hinzugefügt wurde.

Wenn Ihr Element #dSuggest mit input:text[name=dSuggest] identisch ist, können Sie diesen Code erheblich vereinfachen (und wenn dies nicht der Fall ist, ist es keine gute Idee, ein Element mit einem Namen zu haben, der mit der id eines anderen Elements identisch ist).

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

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 stattdessen das Ereignis "input" verwenden und sich mit der Methode .on registrieren. Das geht schnell - ohne die Verzögerung von keyup und löst das letzte von Ihnen beschriebene fehlende Tastendruckproblem.

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

Demo hier

165
gottlieb76

Verwenden Sie .keyup anstelle von Tastendruck. 

Verwenden Sie auch $(this).val() oder einfach this.value, um auf den aktuellen Eingabewert zuzugreifen.

DEMO hier

Info zu .keypress aus jQuery-Dokumenten,

Das Keypress-Ereignis wird an ein Element gesendet, wenn der Browser .__ registriert. Tastatureingabe. Dies ist ähnlich dem Keydown-Ereignis, außer in der Bei Schlüsselwiederholungen. Wenn der Benutzer eine Taste drückt und hält, erfolgt ein Keydown Das Ereignis wird einmalig ausgelöst, aber separate Tastendruckereignisse werden ausgelöst für jedes eingefügte Zeichen. Darüber hinaus lösen Modifizierertasten (z. B. Shift) Keydown-Ereignisse aus, jedoch keine Tastendruckereignisse.

28

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

Dies liegt daran, dass das Ereignis Keypress ausgelöst wird, bevor das neue Zeichen hinzugefügt wird. Verwenden Sie stattdessen 'keyup', was 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 hinzufügen, wenn Sie über viele Textfelder verfügen und dasselbe für ihr keyup-Ereignis tun müssen, können Sie ihnen einfach eine gemeinsame css-Klasse (z. B. commoncss) zuweisen und das keyup-Ereignis wie folgt anwenden.

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

dadurch wird der Code erheblich reduziert, da Sie nicht für jede Textbox das keyup-Ereignis anhand der ID anwenden müssen.

3
yogihosting

Ich denke, was Sie brauchen, ist der untenstehende Prototyp 

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

jQuery erhält den Eingabewert nach dem Drücken der Taste

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>  
0
Devendra Dode

Ich war auf der Suche nach einem ES6-Beispiel (damit es meinen Linter passieren könnte).

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

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

0
MarvinVK

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

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