Firefoxでドラッグ中にinput type=rangeのonchangeイベントがトリガーされない 質問する

Firefoxでドラッグ中にinput type=rangeのonchangeイベントがトリガーされない 質問する

を操作してみたところ<input type="range">、Firefox ではスライダーを新しい位置にドロップした場合にのみ onchange イベントがトリガーされますが、Chrome やその他のブラウザではスライダーがドラッグされている間に onchange イベントがトリガーされます。

Firefox でドラッグするとどうなるでしょうか?

function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}
<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" onchange="showVal(this.value)">

ベストアンサー1

どうやら Chrome と Safari は間違っています。onchangeユーザーがマウスを離したときにのみトリガーされる必要があります。継続的な更新を取得するには、oninputマウスとキーボードの両方から Firefox、Safari、Chrome でライブ更新をキャプチャするイベントを使用する必要があります。

ただし、oninputIE10 ではサポートされていないため、次のように 2 つのイベント ハンドラーを組み合わせるのが最善策です。

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

これをチェックしてくださいBugzilla スレッド詳細については。

おすすめ記事