我有一个滑块,可以使用addEventListener
实时更新文本框输入值。我需要的是文本框输入也可以在用户更改文本框值时更新滑块。
示例代码, HTML:
var slider = document.getElementById("slider");
var textVal = document.getElementById("textVal");
function changeVal() {
setInterval(function() {
textVal.value = slider.value;
}, 100);
}
function removeListener() {
slider.removeEventListener("change", changeVal());
}
slider.addEventListener("change", changeVal());

<input type="text" id="textVal" />
<input type="range" min="0" max="100" value="50" id="slider" class="slider" onfocus="removeListener()" />
&#13;
JS小提琴:
https://jsfiddle.net/s8csgkmk/4/
谢谢!
答案 0 :(得分:1)
input
绑定到您的文本字段。setInterval
并绑定input
事件。removeEventListener
似乎没必要。您需要验证最大值,最小值和数值
var slider = document.getElementById("slider");
var textVal = document.getElementById("textVal");
function changeVal() {
textVal.value = slider.value;
}
slider.addEventListener("input", changeVal);
textVal.addEventListener("input", function() {
slider.value = this.value;
});
&#13;
<input type="text" id="textVal" />
<input type="range" min="0" max="100" value="50" id="slider" class="slider"/>
&#13;