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

How to animate range input element properly?

本文关键字：元素 动画 输入 范围 何正确 设置      更新时间：2023-09-26

我有一个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>

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

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

相关文章：