基于文本框输入的JavascriptremoveEventListener

Question

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

示例代码，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()" />

JS fiddle :

https://jsfiddle.net/s8csgkmk/4/

谢谢!

Answer 1

• 将事件input绑定(bind)到您的文本字段。
• 删除setInterval并绑定(bind)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;
});

<input type="text" id="textVal" />
<input type="range" min="0" max="100" value="50" id="slider" class="slider"/>