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

问题描述

当我玩< input type =range> 时，只有当我们将滑块放到Chrome和其他位置的新位置时，Firefox才会触发onchange事件在拖动滑块时触发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?

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

推荐答案

显然，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线程了解更多信息。

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