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

Question

我有一个 HTML 范围输入元素( slider )，我使用 JavaScript 动态更新其值。这工作正常，直到我单击 slider ，此时它不再更新。这是 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

根据我的经验，当您对输入控件进行动画处理时，并且用户执行任何导致控件聚焦的操作，动画会停止或行为异常，因为浏览器将确保输入控件位于其可以放置的位置用户看到的内容通常并不完全是您想要的位置。这并不是 FF 所独有的，我在 Chrome 和 IE 中也遇​​到过类似的问题。

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