拖动时输入类型 = 范围的 onchange 事件未在 Firefox 中触发 [英] onchange event on input type=range is not triggering in firefox while dragging

问题描述

当我玩 <input type="range"> 时，只有当我们将滑块放到一个新位置时，Firefox 才会触发 onchange 事件，在该位置 Chrome 和其他人在滑块时触发 onchange 事件被拖拽.

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.

如何在 Firefox 中拖动时实现它?

How can I make it happen on dragging in 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)">

推荐答案

显然 Chrome 和 Safari 是错误的:onchange 应该只在用户释放鼠标时触发.要获得持续更新，您应该使用 oninput 事件，该事件将在 Firefox、Safari 和 Chrome 中通过鼠标和键盘捕获实时更新.

Apparently Chrome and Safari are wrong: onchange should only be triggered when the user releases the mouse. 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.

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

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

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

查看此 Bugzilla 线程了解更多信息.

Check out this Bugzilla thread for more information.

这篇关于拖动时输入类型 = 范围的 onchange 事件未在 Firefox 中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！