Erkennung von Eingabeänderungen in jQuery?

Question

Bei Verwendung von jquery .change an einem input das Ereignis wird nur ausgelöst, wenn die Eingabe den Fokus verliert

In meinem Fall muss ich den Dienst aufrufen (prüfen, ob der Wert gültig ist), sobald der Eingabewert geändert wird. Wie kann ich das erreichen?

Answer 1

AKTUALISIERT zur Verdeutlichung und als Beispiel

Beispiele: http://jsfiddle.net/pxfunc/5kpeJ/

Methode 1. input Veranstaltung

In modernen Browsern verwenden Sie die input Veranstaltung. Dieses Ereignis wird ausgelöst, wenn der Benutzer in ein Textfeld eintippt, einfügt, den Vorgang rückgängig macht, also immer dann, wenn sich der Wert von einem Wert zu einem anderen ändert.

In jQuery machen Sie das wie folgt

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

ab jQuery 1.7, ersetzen Sie bind avec on :

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Methode 2. keyup Veranstaltung

Bei älteren Browsern verwenden Sie die keyup (dieses Ereignis wird ausgelöst, sobald eine Taste auf der Tastatur losgelassen wurde. Dieses Ereignis kann eine Art falsches Positiv ergeben, da beim Loslassen von "w" der Eingabewert geändert wird und die keyup Ereignis auslöst, sondern auch beim Loslassen der "Shift"-Taste die keyup ausgelöst wird, aber keine Änderung an der Eingabe vorgenommen wurde.). Diese Methode wird auch nicht ausgelöst, wenn der Benutzer mit der rechten Maustaste klickt und aus dem Kontextmenü einfügt:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Methode 3. Zeitschaltuhr ( setInterval o setTimeout )

Zur Umgehung der Einschränkungen von keyup können Sie einen Timer einstellen, der den Wert des Eingangs regelmäßig überprüft, um eine Wertänderung festzustellen. Sie können verwenden setInterval o setTimeout um diese Zeitüberprüfung durchzuführen. Siehe die markierte Antwort auf diese SO-Frage: jQuery textbox change event oder siehe das Fiddle für ein funktionierendes Beispiel mit focus y blur Ereignisse zum Starten und Stoppen des Timers für ein bestimmtes Eingabefeld

Answer 2

Wenn Sie HTML5 haben:

• oninput (wird nur ausgelöst, wenn eine Änderung tatsächlich eintritt, aber sofort)

Andernfalls müssen Sie auf all diese Ereignisse achten, die eine Änderung des Werts des Eingabeelements anzeigen könnten:

• onchange
• onkeyup ( no keydown o keypress da der Wert der Eingabe den neuen Tastenanschlag noch nicht enthält)
• onpaste (wenn unterstützt)

und vielleicht:

• onmouseup (Ich bin mir da nicht sicher)

Answer 3

Mit HTML5 und ohne Verwendung von jQuery können Sie mit der input Veranstaltung :

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

Dies wird jedes Mal ausgelöst, wenn sich der Text der Eingabe ändert.

Unterstützt in IE9+ und anderen Browsern.

Probieren Sie es live in einer jsFiddle hier .

Answer 4

Wie bereits von anderen vorgeschlagen, besteht die Lösung in Ihrem Fall darin, dass Sie mehrere Ereignisse abhören .
Plugins, die diese Aufgabe übernehmen, lauschen oft auf die folgenden Ereignisse:

$input.on('change keydown keypress keyup mousedown click mouseup', handler);

Wenn Sie glauben, dass es passen könnte, können Sie Folgendes hinzufügen focus , blur und auch andere Veranstaltungen.
Ich schlage vor, in den Ereignissen nicht zu viel zu hören, da dadurch im Speicher des Browsers weitere Prozeduren geladen werden, die je nach dem Verhalten des Benutzers ausgeführt werden.

Achtung! Beachten Sie, dass das Ändern des Wertes eines Eingabeelements mit JavaScript (z. B. durch die jQuery .val() Methode) wird keines der oben genannten Ereignisse ausgelöst.
(Referenz: https://api.jquery.com/change/ ).

Answer 5

// .blur wird ausgelöst, wenn das Element den Fokus verliert

$('#target').blur(function() {
  alert($(this).val());
});

// Zum manuellen Auslösen verwenden Sie:

$('#target').blur();