Eingangsänderung in jQuery erkennen?

359

Wenn Sie jquery .changefür ein verwenden, wird inputdas Ereignis nur ausgelöst, wenn die Eingabe den Fokus verliert

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

Banshee
quelle
3
Welche Art von Eingabe? Textfeld? Kontrollkästchen? Radio? Textbereich? Mal sehen, was Sie sich bisher
Patricia
Entschuldigung, es ist eine Eingabe vom Typ Text. Und wie gesagt, ich habe versucht, Änderungen vorzunehmen, aber diese werden nicht so ausgelöst, wie ich es brauche (für jede Änderung des Textes in der Eingabe). Ich habe auch versucht, Keydown zu verwenden, aber um dies zum Laufen zu bringen, muss ich den Überblick behalten, ob der Eingang "schmutzig" ist oder nicht.
Banshee
2
Wenn sie eine Taste drücken, ändert sich dies in 99% der Fälle. Sie können jederzeit nach den Tasten suchen, die im Ereignishandler nicht vorhanden sind.
Patricia

Antworten:

545

AKTUALISIERT zur Verdeutlichung und zum Beispiel

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

Methode 1. inputEreignis

In modernen Browsern verwenden Sie das inputEreignis. Dieses Ereignis wird ausgelöst, wenn der Benutzer in ein Textfeld tippt, einfügt oder rückgängig macht, im Grunde immer dann, wenn sich der Wert von einem Wert zum anderen ändert.

In jQuery machen Sie das so

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

ab jQuery 1.7 ersetzen binddurch on:

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

Methode 2. keyupEreignis

Für ältere Browser wird das keyupEreignis verwendet (dies wird ausgelöst, sobald eine Taste auf der Tastatur losgelassen wurde. Dieses Ereignis kann eine Art falsches Positiv ergeben, da bei der Freigabe von "w" der Eingabewert geändert wird und das keyupEreignis ausgelöst wird, aber auch, wenn das Die Umschalttaste wird losgelassen, keyupwenn das Ereignis 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 auf das Kontextmenü klickt und es einfügt:

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

Methode 3. Timer ( setIntervaloder setTimeout)

Um die Einschränkungen zu keyupumgehen, können Sie einen Timer einstellen, der den Wert der Eingabe regelmäßig überprüft, um eine Wertänderung festzustellen. Sie können diese Timerprüfung verwenden setIntervaloder durchführen setTimeout. Sehen Sie sich die markierte Antwort auf diese SO-Frage an: Ereignis zum Ändern des jQuery-Textfelds oder sehen Sie sich die Geige an, um ein Arbeitsbeispiel mit focusund blurevents zum Starten und Stoppen des Timers für ein bestimmtes Eingabefeld zu verwenden

MikeM
quelle
Können Sie mehr über diese Lösung erklären? Wie erhalte ich den aktuellen Wert? Und wie kann ich dies nur ausführen, wenn Änderungen am aktuellen Wert vorgenommen werden?
Banshee
Eingabeereignis? Es gibt (noch) kein Eingabeereignis in jQuery ... stackoverflow.com/q/11189136/104380
vsync
Bei Methode 2 binde ich normalerweise sowohl an Keyup als auch an Change. Auf diese Weise wird in Situationen, in denen die Eingabe ohne Tastendruck erfolgt (z. B. beim Einfügen), das Ereignis zumindest ausgelöst, wenn die Eingabe den Fokus verliert.
Geschwindigkeit
1
@AdiDarachi MutationObserver verfolgt Änderungen an DOM-Elementen. Ein Benutzer, der Daten in einem Eingabefeld ändert, löst jedoch keine MutationObserver-Änderung aus. Ich habe einen Testfall eingerichtet. Nur eine JS-Codeänderung des Attributs innerTextoder value(Simulation der Benutzereingabe) löst ein MutationObserver-Ereignis aus. Jsfiddle.net/pxfunc/ 04chgpws / 1 (Informationen zur MutationObserver-Ereignisprotokollierung finden Sie im console.log). Haben Sie einen anderen Testfall, den ich mir ansehen kann?
MikeM
1
Dies funktioniert nicht, wenn ein Skript den Wert ändert
FalcoGer
189

Wenn Sie HTML5 haben:

  • oninput (wird nur ausgelöst, wenn tatsächlich eine Änderung erfolgt, dies jedoch sofort)

Andernfalls müssen Sie nach all diesen Ereignissen suchen, die möglicherweise auf eine Änderung des Werts des Eingabeelements hinweisen:

  • onchange
  • onkeyup( nicht keydown oder keypressda der Wert der Eingabe noch keinen neuen Tastenanschlag enthält)
  • onpaste (wenn unterstützt)

und vielleicht:

  • onmouseup (Da bin ich mir nicht sicher)
Alnitak
quelle
@naomik aus meinem Test funktioniert es für Checkbox-Eingaben; außer IE / Edge. Einige andere Ausnahmen können auftreten, aber es ist klüger, onchange für diese Eingabetypen (IMHO) zu verwenden.
HellBaby
82

Mit HTML5 und ohne Verwendung von jQuery können Sie das inputEreignis verwenden :

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 hier live in einer jsFiddle aus .

Drew Noakes
quelle
1
'change' wird nur bei Unschärfe ausgelöst, nicht wenn sich der Text ändert. Verwenden Sie das Ereignis 'Eingabe', um Textänderungen zu erkennen.
Dermot Doherty
14

Wie andere bereits vorgeschlagen haben, besteht die Lösung in Ihrem Fall darin, mehrere Ereignisse zu erfassen .
Plugins, die diesen Job ausführen, warten häufig auf die folgenden Ereignisse:

$ input.on ('Tastendruck ändern Tastendruck maused Mausklick', Handler);. on ( 'Tastendruck-Tastendruck ändern, Mausklick-Mausklick' , Handler );

Wenn Sie denken , es kann passen, können Sie hinzufügen focus, blurund andere zu Veranstaltungen.
Ich schlage vor, die zu hörenden Ereignisse nicht zu überschreiten, da im Browser-Speicher weitere Prozeduren geladen werden, die entsprechend dem Verhalten des Benutzers ausgeführt werden sollen.

Achtung: Beachten Sie, dass das Ändern des Werts eines Eingabeelements mit JavaScript (z. B. über die jQuery- .val()Methode) keines der oben genannten Ereignisse auslöst.
(Referenz: https://api.jquery.com/change/ ).

Emanuele Del Grande
quelle
Ich empfehle auch, Focusout hinzuzufügen, um Probleme mit der automatischen Vervollständigung zu vermeiden
binar
Aha. Ich habe gesucht und Focusout scheint nur vom IE und teilweise von Chrome unterstützt zu werden. Stimmt das?
Emanuele Del Grande
5
Nur als milde Ergänzung: Um das Ereignis von jQuery aus auszulösen, können Sie die entsprechende Aktion aufrufen, nachdem Sie .val()beispielsweise für ein Änderungsereignis in einem Eingabefeld $('#element').val(whatever).change()
Folgendes
2

Wenn Sie möchten, dass das Ereignis ausgelöst wird, wenn sich innerhalb des Elements etwas ändert, können Sie das Keyup- Ereignis verwenden.

Jivings
quelle
Okay, aber ist das nicht mehr oder weniger dasselbe wie der Keydown? Muss ich selbst prüfen, ob der Eingang "schmutzig" ist?
Banshee
@SnowJim Wenn Sie nur dann etwas tun möchten, wenn sich die Eingabe tatsächlich ändert, müssen Sie onchangeden Status entweder verwenden oder selbst verfolgen. keydownfunktioniert nicht, weil es ausgelöst wird, bevor der Status der Eingabe geändert wird.
Alnitak
@Alnitak genau und deshalb stelle ich hier die Frage. Der Wechsel funktioniert nicht, er wird nur ausgelöst, wenn die Eingabe verlassen wird.
Banshee
Der Elefant im Raum ist natürlich mobil. Ich bin mir ziemlich sicher, dass dort keine Tastatur- oder Mausereignisse von großem Nutzen sein werden. : p
Askdesigners
@ Askdesigners Keyup / Down-Ereignisse sollten auf Mobilgeräten immer noch auf die gleiche Weise funktionieren.
Jivings
2

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

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

// Um ​​manuell auszulösen, verwenden Sie:

$('#target').blur();
Kszili
quelle
1
.change wird wie gesagt nur ausgelöst, wenn der Inout den Fokus verliert und der Wert geändert wird. Ich muss eine Gerade erhalten, sobald die Eingabe (Text) geändert wird (sobald der Text in der Eingabe geändert wird). Unschärfe wird nur ausgelöst, wenn der Eingang den Fokus verliert.
Banshee
1

Es gibt jQuery-Ereignisse wie Keyup und Keypress, die Sie mit eingegebenen HTML-Elementen verwenden können. Sie können zusätzlich das Ereignis blur () verwenden .

Softwareentwickler
quelle
1
.change wird wie gesagt nur ausgelöst, wenn der Inout den Fokus verliert und der Wert geändert wird. Ich muss eine Gerade erhalten, sobald die Eingabe (Text) geändert wird (sobald der Text in der Eingabe geändert wird). Unschärfe wird nur ausgelöst, wenn der Eingang den Fokus verliert.
Banshee
1
Sie können den Wert einer Eingabe während eines keypressEreignisses nicht zuverlässig überprüfen, da die gedrückte Taste diesen Wert noch nicht geändert hat.
Alnitak
0

Dies umfasst jede Änderung an einer Eingabe mit jQuery 1.7 und höher:

$(".inputElement").on("input", null, null, callbackFunction);
rybo111
quelle