範囲入力の「Onchange」イベント処理で Firefox の動作が異なるのはなぜですか?

入力タイプ=範囲 Firefox での変更時イベント動作の違い

問題ステートメント:

while を使用すると、Firefox はスライダーが新しい位置にドロップされたときにのみ 'onchange' イベントをトリガーしますが、Chrome などの他のブラウザーはドラッグ操作中にイベントを開始します。

解決策:

動作の不一致は、ブラウザーの「onchange」イベントの実装が異なるために発生します。 HTML 仕様に従って、'onchange' は入力フィールドの値が確定したとき (マウスが放されたときなど) にのみ実行される必要があります。

この不一致に対処するには、次の解決策を採用できます:

マウスのドラッグ中とキーボード入力中の値の変更をキャプチャする「oninput」イベントを利用して、ブラウザ間で一貫した動作を提供します。

ただし、「oninput」は IE10 ではサポートされていません。したがって、包括的な互換性を確保するために、「oninput」イベント ハンドラーと「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>

このアプローチを組み込むことで、「onchange」イベントは Firefox、Safari、Chrome で一貫してトリガーされます。また、IE10 との互換性も確保されています。

以上が範囲入力の「Onchange」イベント処理で Firefox の動作が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。