Javascript removeEventListener基于文本框输入

时间:2018-02-14 22:05:35

标签: javascript html input textbox

我有一个滑块,可以使用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;
&#13;
&#13;

JS小提琴:

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

谢谢!

1 个答案:

答案 0 :(得分:1)

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

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

&#13;
&#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;
&#13;
&#13;