当我玩时<input type="range">,只有在将滑块放到新位置时Firefox才会触发onchange事件,在该位置上,Chrome和其他人在拖动滑块时触发onchange事件。
<input type="range">
如何在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中的实时更新。
onchange
oninput
但是,oninputIE10不支持此功能,因此最好的选择是将两个事件处理程序结合起来,如下所示:
<span id="valBox"></span> <input type="range" min="5" max="10" step="1" oninput="showVal(this.value)" onchange="showVal(this.value)">