it-swarm.com.de

Erkennen Sie eine Eingabeänderung in jQuery?

Wenn Sie jquery .change für input verwenden, wird das Ereignis nur ausgelöst, wenn die Eingabe den Fokus verliert

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

345
Banshee

AKTUALISIERT zur Verdeutlichung und als Beispiel

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

Methode 1. Ereignis input

Verwenden Sie in modernen Browsern das Ereignis input . Dieses Ereignis wird ausgelöst, wenn der Benutzer ein Textfeld eingibt, einfügt oder rückgängig macht, und zwar grundsätzlich immer dann, wenn sich der Wert von einem Wert auf einen anderen geändert hat.

In jQuery machen Sie das so

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

ersetzen Sie ab jQuery 1.7 bind durch on:

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

Methode 2. keyup event

Verwenden Sie für ältere Browser das Ereignis keyup (dies wird ausgelöst, sobald eine Taste auf der Tastatur losgelassen wurde. Dieses Ereignis kann eine Art falsches Positiv auslösen, da beim Loslassen von "w" der Eingabewert geändert wird und das Ereignis keyup ausgelöst wird Wenn die Umschalttaste losgelassen wird, wird das Ereignis keyup ausgelöst, die Eingabe wurde jedoch nicht geändert. 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 (setInterval oder setTimeout)

Um die Einschränkungen von keyup zu umgehen, können Sie einen Timer festlegen, der den Wert der Eingabe regelmäßig überprüft, um eine Wertänderung zu ermitteln. Sie können setInterval oder setTimeout verwenden, um diese Timer-Prüfung durchzuführen. Lesen Sie die markierte Antwort auf diese SO Frage: jQuery textbox change event oder sehen Sie sich die Geige für ein funktionierendes Beispiel an, in dem Ereignisse focus und blur zum Starten und Stoppen des Timers für ein bestimmtes Eingabefeld verwendet werden

521
MikeM

Wenn Sie HTML5 haben:

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

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

  • onchange
  • onkeyup (nichtkeydown oder keypress, da der Wert der Eingabe noch keinen neuen Tastendruck enthält)
  • onpaste (sofern unterstützt)

und vielleicht:

  • onmouseup (da bin ich mir nicht sicher)
183
Alnitak

In HTML5 und ohne jQuery können Sie das input event 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.

Versuchen Sie es live in einem jsFiddle hier .

81
Drew Noakes

Wie bereits von anderen vorgeschlagen, lautet die Lösung in Ihrem Fall mehrere Ereignisse abhören.
Plugins, die diesen Job ausführen, lauschen häufig auf die folgenden Ereignisse:

$ input.on ('keydown keypress keyup mousedown click mouseup ändern', Handler);

Wenn Sie glauben, dass es passt, können Sie focus, blur und andere Ereignisse hinzufügen.
Ich schlage vor, die zu hörenden Ereignisse nicht zu überschreiten, da im Browserspeicher weitere Prozeduren geladen werden, die je nach Benutzerverhalten auszuführen sind.

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

11

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

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

// Zum manuellen Auslösen verwenden Sie:

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

Wenn Sie möchten, dass das Ereignis ausgelöst wird, wenn sich im Element etwas ändert, können Sie das Ereignis keyup verwenden.

2
Jivings

Es gibt jQuery-Ereignisse wie keyup und keypress, die Sie mit HTML-Eingabeelementen verwenden können. Sie können auch das blur () -Ereignis verwenden.

1

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

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