Wie kann ich Eingabeänderungen in Echtzeit verfolgen, ohne den Fokus zu verlieren?

Verfolgen von Eingabeänderungen in Echtzeit mithilfe von „onchange“, ohne den Fokus zu verlieren

Eingabesteuerelemente mit dem Typ „Text“ lösen normalerweise das „ onchange“-Ereignis nur, wenn der Benutzer das Feld verlässt (unscharf macht). Diese Einschränkung kann frustrierend sein, wenn Änderungen während der Benutzereingabe verfolgt werden.

Glücklicherweise bieten moderne Browser eine bessere Lösung: „oninput“. Dieser Ereignis-Listener bietet eine Echtzeitaktualisierung des Inhalts des Textfelds, sodass Sie den Fokus nicht verlieren müssen. Für maximale Kompatibilität empfiehlt es sich, für die IE-Unterstützung sowohl „oninput“ als auch „onpropertychange“ zu verwenden.

Ein Beispiel zur Veranschaulichung dieses Ansatzes:

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 IE8

Zusätzliche Hinweise zur Browserkompatibilität:

• „oninput“ wird in allen gängigen Browsern unterstützt, auch auf Mobilgeräten Browser.
• IE8 und niedriger erfordern das Ereignis „onpropertychange“.
• „onchange“ eignet sich aufgrund der Verzögerung nach dem Verlust des Fokus nicht zum Verfolgen von Änderungen während der Eingabe.

Das obige ist der detaillierte Inhalt vonWie kann ich Eingabeänderungen in Echtzeit verfolgen, ohne den Fokus zu verlieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!