onChange事件用于HTML5范围 [英] onChange event for HTML5 range

问题描述

有没有办法阻止这个事件被触发，直到用户放弃了这个事件滑块？

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

---

以下是代码：

HTML：

 < div id =page> 
< p>目前正在查看页面< span> 1< / span>。< / p> 
< input class =slidertype =rangemin =1max =100step =1value =1name =page/> 
< / div> 
  

JavaScript：

 < $（$form）。serialize（））; 
} $（。slider）。change（function（）{
 $（＃query）。text ）; 
  

有帮助吗？

解决方案

用于最终选定的值：

  $（。slider）。on（change ，function（）{console.log（this.value）}）; 
  

用于获得增量值作为滑动：

< $（$。$）$（。）。on（input，function（）{console.log（this.value）}）;

Currently the onChange event on my range inputs is firing at each step.

Is there a way to stop this event from firing until the user has let go of the slider?

I'm using the range to create a search query. I want to be able to run the search every time the form is changed but issuing a search request at each step of the slider's movement is too much.

---

Here's the code as it stands:

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

Does that help?

解决方案

Use for final selected value:

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

Use to get incremental value as sliding:

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

这篇关于onChange事件用于HTML5范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！