Warum verhält sich Firefox bei der „Onchange“-Ereignisbehandlung für Bereichseingaben anders?

Eingabetyp=Bereich-Onchange-Ereignisverhaltensunterschied in Firefox

Problemstellung:

Während Bei Verwendung von löst Firefox das Ereignis „onchange“ nur aus, wenn der Schieberegler an eine neue Position verschoben wird, während andere Browser wie Chrome das Ereignis während des Ziehvorgangs initiieren.

Lösung:

Die Diskrepanz im Verhalten entsteht durch unterschiedliche Browser-Implementierungen des „onchange“-Ereignisses. Gemäß den HTML-Spezifikationen sollte „onchange“ nur ausgeführt werden, wenn der Wert des Eingabefelds endgültig festgelegt ist (z. B. wenn die Maus losgelassen wird).

Um diese Ungleichheit zu beheben, kann die folgende Lösung verwendet werden:

Verwenden Sie das „oninput“-Ereignis, das Wertänderungen sowohl beim Ziehen mit der Maus als auch bei Tastatureingaben erfasst und so für ein einheitliches Verhalten in allen Browsern sorgt.

Allerdings wird „oninput“ in IE10 nicht unterstützt. Erwägen Sie daher für eine umfassende Kompatibilität die Kombination der Ereignishandler „oninput“ und „onchange“:

<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>

Durch die Integration dieses Ansatzes werden „onchange“-Ereignisse in Firefox, Safari und Chrome konsistent ausgelöst stellt außerdem die Kompatibilität mit IE10 sicher.

Das obige ist der detaillierte Inhalt vonWarum verhält sich Firefox bei der „Onchange“-Ereignisbehandlung für Bereichseingaben anders?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!