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

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

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

Answer 2

输入的

step属性：范围及其原生函数stepUp() stepDown()可以实现此目的。

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

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

2 个答案: