Alle Änderungen des Inhalts eines Eingabefelds mit Javascript/jQuery abfangen

Question

Ich habe eine Seite mit einem Eingabefeld und einer Funktion, die den Wert dieses Eingabefelds verarbeitet und einen Text erstellt. Ich möchte, dass dieser Text immer auf dem neuesten Stand in Bezug auf den Inhalt des Eingabefelds bleibt, daher habe ich ein paar Ereignisbehandlungen damit verbunden, um Änderungen mit jQuery abzufangen:

$('#input').bind('keyup cut paste', function(){...});

In den meisten Fällen funktioniert dies gut. Immer wenn der Benutzer den Inhalt auf irgendeine Weise mit der Tastatur ändert oder mit der rechten Maustaste auf Ausschneiden oder Einfügen klickt, wird der Text sofort aktualisiert. Es gibt jedoch zwei Ereignisse, die ich noch nicht herausgefunden habe, wie man sie abfängt, falls es überhaupt möglich ist:

• Wenn der Benutzer einen Text auswählt und ihn an eine andere Stelle im Eingabefeld zieht
• Wenn der Benutzer die Löschaktion im Kontextmenü mit der rechten Maustaste verwendet

Beide Ereignisse kann man natürlich feststellen, indem man das change-Ereignis bindet, aber das Problem dabei ist, dass es erst ausgelöst wird, wenn das Eingabefeld den Fokus verliert. Der ganze Sinn dieser Bindungen besteht darin, dass der Text in Echtzeit aktualisiert wird, wenn sich der Wert des Eingabefelds ändert, also ist change keine gute Lösung.

Englisch ist meine zweite Sprache, daher könnte ich einfach schlecht darin sein, meine Google-Suchen zu formulieren, aber bisher habe ich nichts dazu gefunden. Auch nachdem ich ein paar verwandte SO-Seiten durchgearbeitet habe, konnte ich keine Lösungen dazu finden. Gibt es eine Ereignisbindung dafür, die ich nicht kenne? Wenn nicht, gibt es einen anderen Ansatz, den ich verfolgen könnte? Oder ist dies einfach nicht möglich mit reinem JavaScript?

Answer 1

In Nicht-IE-Browsern können Sie das input-Ereignis behandeln.
In IE können Sie das propertychange-Ereignis behandeln.

Demo (funktioniert in allen Browsern)

Answer 2

Es ist möglich, dass diese SO-Frage (und das zugehörige jsfiddle) Ihre Frage beantwortet.

(Auf dem verlinkten jsfiddle, geben Sie Text in das oberste Feld ein, um es zu testen)

Anders ausgedrückt, binden Sie an mouseup und mousedown, usw.

Answer 3

Wenn Sie keine Kombination von Ereignissen finden können, die alle Fälle abdecken, möchten Sie möglicherweise setInterval(function() {... }, period) verwenden. Sie könnten mit dem period herumspielen, um zu sehen, wie gut das funktioniert.