為什麼火狐中範圍輸入拖曳不觸發onchange事件？

Firefox onchange 事件在範圍輸入拖曳時未觸發

在類型為「range」的輸入元素中，當拖曳滑塊時，onchange僅當滑桿放到Firefox 中的新位置時才會觸發該事件。相較之下，Chrome 和其他瀏覽器在拖曳過程中會觸發 onchange 事件。

解決方案：使用 oninput 事件

Firefox 僅在釋放時正確觸發 onchange 事件，按照規格。若要在所有瀏覽器中拖曳期間擷取即時更新，請改用 oninput 事件。

<code class="html">function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}</code>

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

結合oninput 和onchange 實現跨瀏覽器相容性

對於為了跨瀏覽器相容性，請考慮結合使用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 中觸發，而oninput 事件在所有瀏覽器中提供持續更新。

以上是為什麼火狐中範圍輸入拖曳不觸發onchange事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！