Wie kann man Änderungen in Texteingabefeldern in Echtzeit verfolgen?

Beste Möglichkeit, Änderungen in Eingabetextfeldern in Echtzeit zu verfolgen

Bei Verwendung des Eingabetyps „text“ erfolgt das Onchange-Ereignis häufig erst, nachdem der Benutzer den Fokus verlässt vom Feld. Dies kann problematisch sein, wenn vorgenommene Änderungen verfolgt werden müssen.

Browserunterstützung für On-the-Fly-Tracking

Moderne Browser bieten eine Lösung durch das Oninput-Ereignis. Dieses Ereignis wird jedes Mal ausgelöst, wenn sich der Inhalt des Textfelds ändert. Es ist ein nahezu perfekter Ersatz für onchange und bietet Echtzeitüberwachung, ohne dass Sie den Fokus vom Element verlieren müssen. Es wird von allen gängigen Browsern unterstützt, einschließlich mobiler Browser.

Browserübergreifende Kompatibilität

Bei älteren Browsern, einschließlich IE8 und niedriger, kann eine Kombination aus dem Ereignis „onpropertychange“ und dem Ereignis „oninput“ eine übergreifende Kompatibilität gewährleisten. Browserkompatibilität.

Ein Codebeispiel

Hier ist ein Beispielcode, der zeigt, wie man oninput und onpropertychange für die browserübergreifende Verfolgung verwendet:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerText = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler);

// For completeness, include listen for option changes which won't trigger either input or change
source.addEventListener('change', inputHandler);

Für Browser, die nicht Da oninput oder onchange nicht unterstützt wird, kann alternativ die Funktion setTimeout verwendet werden, die jedoch nicht so elegant oder effizient ist wie die oben genannten Lösungen.

Das obige ist der detaillierte Inhalt vonWie kann man Änderungen in Texteingabefeldern in Echtzeit verfolgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!