ブラウザー間で、Input Type=Range onchange イベントの一貫した動作を実現するにはどうすればよいですか?

Firefox と他のブラウザでの、Input Type=Range の Onchange イベントの動作に一貫性がない

、Firefox と他のブラウザーの顕著な違いは、onchange イベントの動作です。 Firefox では、このイベントはスライダーを離したときにのみトリガーされますが、他のブラウザーはドラッグ プロセス全体を通じてこのイベントを呼び出します。

ブラウザ間で一貫した動作を実現し、ドラッグ中にライブ アップデートを取得するには、oninput イベントを onchange と組み合わせて利用します。このアプローチでは、入力ソース (マウスまたはキーボード) に関係なく、Firefox、Safari、Chrome の更新をキャプチャします。

更新されたコード サンプルは次のとおりです。

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

この結合されたイベント処理により、次のことが保証されます。 showVal 関数は、ドラッグ段階 (入力時) と値の解放時 (変更時) の両方で呼び出され、すべての主要なブラウザーで一貫したエクスペリエンスを提供します。この動作の不一致の詳細については、Bugzilla スレッドを確認してください。

以上がブラウザー間で、Input Type=Range onchange イベントの一貫した動作を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。