Alle Änderungen an einem <input type="text"> (sofort) mit JQuery erkennen

Question

Es gibt viele Möglichkeiten, den Wert eines <input type="text"> ändern können, einschließlich:

• Tastendrucke
• Kopieren/Einfügen
• geändert mit JavaScript
• vom Browser oder einer Symbolleiste automatisch vervollständigt

Ich möchte, dass meine JavaScript-Funktion jedes Mal aufgerufen wird (mit dem aktuellen Eingabewert), wenn sich dieser ändert. Und ich möchte, dass sie sofort aufgerufen wird, nicht erst, wenn die Eingabe den Fokus verliert.

Ich bin auf der Suche nach dem saubersten und robustesten Weg, dies über alle Browser hinweg zu tun (vorzugsweise mit jQuery).

Answer 1

Dieser jQuery-Code fängt sofortige Änderungen an jedem Element ab und sollte in allen Browsern funktionieren:

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

Answer 2

Eine schicke Echtzeit-Lösung für jQuery >= 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

wenn Sie auch das "Klick"-Ereignis erkennen wollen, einfach:

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

wenn Sie jQuery <= 1.4 verwenden, benutzen Sie einfach live anstelle von on .

Answer 3

Leider, denke ich setInterval gewinnt den Preis:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

Es ist die sauberste Lösung, mit nur 1 Zeile Code. Es ist auch die robusteste, da Sie sich nicht um all die verschiedenen Ereignisse/Wege kümmern müssen, die ein input kann einen Wert erhalten.

Die Nachteile der Verwendung von "setInterval" scheinen in diesem Fall nicht zu gelten:

• Die 100 ms Latenzzeit? Für viele Anwendungen sind 100 ms schnell genug.
• Zusätzliche Belastung des Browsers? Im Allgemeinen ist das Hinzufügen von vielen schwergewichtigen setIntervals auf Ihrer Seite schlecht. Aber in diesem speziellen Fall ist die zusätzliche Seitenlast nicht nachweisbar.
• Es skaliert nicht für viele Eingaben? Die meisten Seiten haben nicht mehr als eine Handvoll Eingaben, die Sie alle im selben setInterval abfragen können.

Answer 4

Bindung an die oninput scheint in den meisten vernünftigen Browsern gut zu funktionieren. IE9 unterstützt es auch, aber die Implementierung ist fehlerhaft (das Ereignis wird beim Löschen von Zeichen nicht ausgelöst).

Mit jQuery Version 1.7+ wird die on Methode ist nützlich, um sich an das Ereignis wie folgt zu binden:

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

Answer 5

2017 Antwort : die Eingabeereignis tut genau dies für alles, was neuer als IE8 ist.

$(el).on('input', callback)