HTML5范围的onChange事件

Question

目前,我的范围输入上的onChange事件在每一步都触发.

有没有办法阻止此事件触发,直到用户放开滑块？

我正在使用该范围来创建搜索查询.我希望每次更改表单时都能运行搜索,但是在滑块移动的每一步发出搜索请求太多了.

---

这是代码:

HTML:

<div id="page">
    <p>Currently viewing page <span>1</span>.</p>
    <input class="slider" type="range" min="1" max="100" step="1" value="1" name="page" />
</div>

JavaScript的:

$(".slider").change(function() {
    $("#query").text($("form").serialize());
});

这有帮助吗？

Answer 1

用于最终选定值:

 $(".slider").on("change", function(){console.log(this.value)});

用于获取滑动的增量值:

$(".slider").on("input", function(){console.log(this.value)});

Answer 2

有点迟了,但前几天我遇到了同样的问题.这是我使用jQuery绑定/触发器的解决方案:

(function(el, timeout) {
    var timer, trig=function() { el.trigger("changed"); };
    el.bind("change", function() {
        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(trig, timeout);
    });
})($(".slider"), 500);

现在只需将您的函数绑定到"已更改"事件即可.

Answer 3

呸!

使用onmouseup事件而不是onChange

Answer 4

一个问题是AFAIK HTML5没有定义onchange事件应该触发的时间,所以它很可能与浏览器不同.而且你还必须考虑,浏览器实际上不必渲染input type=range一个滑块.

您唯一的选择是必须建立一种机制来确保搜索不会过于频繁地触发,例如,检查搜索当前是否正在运行并且如果是,则中止搜索,或者确保搜索是在最多每x秒.

后者的快速示例(只是快速入侵,未经测试).

var doSearch = false;

function runSearch() {
   // execute your search here 
}

setInterval(function() {
  if (doSearch) {
     doSearch = false;
     runSearch();
  }
}, 2000); // 2000ms between each search.

yourRangeInputElement.onchange = function() { doSearch = true; }

Answer 5

纯JS在这里:

myInput.oninput = function(){
    console.log(this.value);
}

要么

myInput.onchange = function(){
    console.log(this.value);
}