Question

我有一个滑块，可以使用addEventListener实时更新文本框输入值。我需要的是文本框输入也可以在用户更改文本框值时更新滑块。

示例代码， HTML：

＆＃13;

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());

＆＃13;

<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/

谢谢！

Answer 1

将事件input绑定到您的文本字段。
删除setInterval并绑定input事件。
removeEventListener似乎没必要。

您需要验证最大值，最小值和数值

＆＃13;

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;

Javascript removeEventListener基于文本框输入

1 个答案: