Wie können Sie Eingabeänderungen in Textfeldern in Echtzeit verfolgen?

Verfolgen von Eingabeänderungen in Textfeldern während der Eingabe

Entgegen der weit verbreiteten Fehlannahme wird das Ereignis „input type="text" onchange“ beim Verlassen ausgelöst die Kontrolle (Unschärfe). Um auftretende Änderungen zu verfolgen, sollten Sie das oninput-Ereignis von HTML5 nutzen.

Vorteile von oninput:

• Fühlt sich wie onchange an, ohne den Fokus auf das Element zu verlieren.
• Weitgehend unterstützt von allen Browsern, einschließlich Mobiltelefonen, außer IE8 und unten.

Implementierung:

Für andere Browser als IE fügen Sie einfach einen Ereignis-Listener für das oninput-Ereignis hinzu:

document.getElementById('source').addEventListener('input', inputHandler);

Fügen Sie für IE8 einen Ereignis-Listener für onpropertychange as ein Nun:

document.getElementById('source').addEventListener('propertychange', inputHandler);

Zusätzliche Überlegungen:

Obwohl oninput in den meisten Fällen zuverlässig ist, gibt es für bestimmte Eingaben Einschränkungen:

• Optionen auswählen: Firefox/Edge18-/IE9 wird bei Eingabe für Auswahloption nicht ausgelöst Änderungen.
• Einfügen mit der rechten Maustaste: Die Verwendung von Onkey*-Ereignissen ist nicht ideal, da durch Rechtsklick und Einfügen Inhaltsänderungen auftreten können.

In diesen In bestimmten Szenarien besteht eine mögliche Problemumgehung darin, die Änderungsverfolgung manuell mithilfe einer setTimeout-Funktion durchzuführen. Es ist zwar nicht so elegant, kann aber dennoch Änderungen effektiv erfassen.

Das obige ist der detaillierte Inhalt vonWie können Sie Eingabeänderungen in Textfeldern in Echtzeit verfolgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!