javascript - 输入类型=范围的onchange事件在拖动时不会在firefox中触发(onchange event on input type=range is not triggering in firefox while dragging)

Question

When i played with <input type="range"> , Firefox triggers an onchange event only if we drop the slider to a new position where Chrome and others triggers onchange events while the slider is dragged.

(当我使用<input type="range"> ，只有当我们将滑块拖放到Chrome和其他人在拖动滑块时触发onchange事件的新位置时，Firefox才会触发onchange事件。)

How can i make it happen on dragging in firefox?

(如何在firefox中拖动它？)

HTML

(HTML)

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

SCRIPT

(脚本)

function showVal(newVal){
  document.getElementById("valBox").innerHTML=newVal;
}

  ask by Prasanth K C translate from so

Answer 1

Apparently Chrome and Safari are wrong: onchange should only be triggered when the user releases the mouse.

(显然Chrome和Safari是错误的：只有在用户释放鼠标时才会触发onchange 。)

To get continuous updates, you should use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.

(要获得持续更新，您应该使用oninput事件，它将通过鼠标和键盘捕获Firefox，Safari和Chrome中的实时更新。)

However, oninput is not supported in IE10, so your best bet is to combine the two event handlers, like this:

(但是，IE10不支持oninput ，所以最好的办法是组合两个事件处理程序，如下所示：)

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

Check out this Bugzilla thread for more information.

(查看此Bugzilla线程以获取更多信息。)