javascript - 如何正确地为范围输入元素设置动画？

Question

我有一个 HTML 范围输入元素（滑块），我使用 JavaScript 动态更新其值。这工作正常，直到我单击滑块，此时它不再更新。这是 Firefox 中的错误还是为什么会这样？

<script src="http://d3js.org/d3.v3.js"></script>
<script>
var timeValue = 0;
var timeSlider = d3.select("body").append("input")
.attr("type", "range")
.attr("min", 0)
.attr("max", 10000)
.style("width", "500px");

window.setInterval(update, 20);

function update() {
    timeValue += 20;
    timeSlider.attr("value", timeValue);
}
</script>

Answer 1

stepinput:range 属性及其原生函数stepUp() stepDown()可以实现这一点。

演示：http: //jsbin.com/oWORIdU/1/

Answer 2

根据我的经验，当您为输入控件设置动画并且用户执行任何导致控件聚焦的操作时，由于浏览器将确保输入控件位于可以看到的位置，动画会停止或行为不端。用户，这通常不是您想要的。这不排除 FF 我在 Chrome 和 IE 中遇到过类似的问题。

要解决此问题，您必须在动画开始之前禁用输入控件，并在动画结束后再次启用它。