Wie erreicht man ein konsistentes Verhalten des Input Type=Range onchange-Ereignisses in allen Browsern?

Inkonsistentes Verhalten des Onchange-Ereignisses für Input Type=Range in Firefox im Vergleich zu anderen Browsern

Beim Arbeiten mit , ein bemerkenswerter Unterschied zwischen Firefox und anderen Browsern ist das Verhalten des onchange-Ereignisses. In Firefox wird dieses Ereignis nur beim Loslassen des Schiebereglers ausgelöst, während andere Browser es während des gesamten Ziehvorgangs aufrufen.

Um ein konsistentes Verhalten in allen Browsern zu erreichen und während des Ziehens Live-Updates zu erhalten, verwenden Sie das Ereignis oninput in Verbindung mit onchange. Dieser Ansatz erfasst Aktualisierungen in Firefox, Safari und Chrome, unabhängig von der Eingabequelle (Maus oder Tastatur).

Hier ist ein aktualisiertes Codebeispiel:

<code class="html"><span id="valBox"></span>
<input type="range" min="5" max="10" step="1" oninput="showVal(this.value)" onchange="showVal(this.value)" /></code>

Diese kombinierte Ereignisbehandlung stellt dies sicher Die Funktion showVal wird sowohl während der Ziehphase (oninput) als auch während der Wertfreigabe (onchange) aufgerufen und sorgt so für ein konsistentes Erlebnis in allen gängigen Browsern. Weitere Einzelheiten zu dieser Verhaltensdiskrepanz finden Sie im Bugzilla-Thread.

Das obige ist der detaillierte Inhalt vonWie erreicht man ein konsistentes Verhalten des Input Type=Range onchange-Ereignisses in allen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!