blocks|key|1774677|text|用于最终选定的值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1774678|+$(".slider").on("change",+function(){console.log(this.value)});|code-block|syntax|javascript|1774679|使用以滑动方式获取增量值：|1774680|$(".slider").on("input",+function(){console.log(this.value)});|1774681|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use for final selected value:

<pre><code> $(".slider").on("change", function(){console.log(this.value)});
</code></pre>

Use to get incremental value as sliding:

<pre><code>$(".slider").on("input", function(){console.log(this.value)});
</code></pre>

blocks|key|1987810|text|有点晚了，但前几天我也遇到了同样的问题。以下是我使用jQuery绑定/触发器的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1987811|(function(el,+timeout)+{
++++var+timer,+trig=function()+{+el.trigger("changed");+};
++++el.bind("change",+function()+{
++++++++if(timer)+{
++++++++++++clearTimeout(timer);
++++++++}
++++++++timer+=+setTimeout(trig,+timeout);
++++});
})($(".slider"),+500);|code-block|syntax|javascript|1987812|现在只需将您的函数绑定到“changed”事件即可。|1987813|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Bit late, but I had the same problem the other day. Here is my solution using jQuery bind/trigger:

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

Now just bind your function to the 'changed' event instead.

blocks|key|1774014|text|哇！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1774015|使用onmouseup事件而不是onChange|offset|length|style|CODE|1774016|entityMap^0|0|2|9|G|8|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

Bah!

Use <code>onmouseup</code> event Rather then <code>onChange</code>

blocks|key|1773982|text|一个问题是，AFAIK的HTML5并没有定义何时触发onchange事件，所以它很可能在不同的浏览器上是不同的。您还必须考虑到，浏览器实际上不必将input+type=range呈现为滑块。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1773983|您唯一的选择是，您必须内置一种机制，以确保您的搜索不会被频繁触发，例如，检查搜索当前是否正在运行并在运行时中止，或者确保搜索最多每x秒触发一次。|1773984|后者的快速示例(只是一个快速的hack，未经测试)。|1773985|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;+}|code-block|syntax|javascript|1773986|entityMap^0|Q|8|21|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

One problem is that AFAIK the HTML5 doesn't define when the <code>onchange</code> event is supposed to fire, so it is most likely different from browser to browser. And you also have to consider, that a browser doesn't actually have to render an <code>input type=range</code> as a slider.

Your only choice is that you have to build in a mechanism to make sure that your search isn't triggered too often, for example, check if a search is currently running and abort if it is, or make sure that searches are triggered at a maximum of every x seconds.

Quick example for the latter (just a quick hack, untested).

<pre><code>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; }
</code></pre>

blocks|key|1988734|text|这里是纯JS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1988735|myInput.oninput+=+function(){
++++console.log(this.value);
}|code-block|syntax|javascript|1988736|或|1988737|myInput.onchange+=+function(){
++++console.log(this.value);
}|1988738|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Pure JS here:

<pre><code>myInput.oninput = function(){
 console.log(this.value);
}
</code></pre>

or

<pre><code>myInput.onchange = function(){
 console.log(this.value);
}
</code></pre>

blocks|key|1774049|text|另一个建议是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1774050|$(".slider").change(function(){++++
++if+(this.sliderTimeour)+clearTimeout(this.sliderTimeour);
++this.sliderTimeour+=+setTimeout(function(){
++++//your+code+here
++},delayTimeHere);
});|code-block|syntax|javascript|1774051|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

another suggest: 

<pre><code>$(".slider").change(function(){ 
 if (this.sliderTimeour) clearTimeout(this.sliderTimeour);
 this.sliderTimeour = setTimeout(function(){
 //your code here
 },delayTimeHere);
});
</code></pre>

blocks|key|1988386|text|您可以尝试使用blur事件。当然，它也有它的局限性，但这只是另一个建议:)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1988387|您还可以尝试组合使用blur、onkeyup和onmouseup事件来捕捉不同的情况:当用户使用键盘箭头并点击<Tab>进行选择时为blur，当用户使用键盘进行选择并将焦点停留在滑块上时为onkeyup，当使用鼠标进行选择时为onmouseup。甚至可以只组合onkeyup和onmouseup。|1988388|1988389|entityMap^0|7|4|0|A|4|F|7|N|9|1J|5|1U|4|2M|7|35|9|3M|7|3U|9|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@$9|L|A|M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|16|8|@]|D|@]|E|$]]|$1|I|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|J|$]]

You can try to use <code>blur</code> event. Of course it also has it's limitations but it's just another suggestion :) 

You can also try to combine the <code>blur</code>, <code>onkeyup</code> and <code>onmouseup</code> events to try to catch different situations: <code>blur</code> when the user makes the selection with keybord arrows and hits <code>&lt;Tab&gt;</code>, <code>onkeyup</code> when the user makes the selections with keyboard and stays focused on the slider, and <code>onmouseup</code> when he uses the mouse. It might be even possible to only combine the <code>onkeyup</code> and <code>onmouseup</code>. 

Still you will have to make a simple check if the value has changed or not and run neccessary code only after a change occured.

blocks|key|1988670|text|onchange运行得很好，但我需要在滑动的同时更新它的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1988671|var+interval;
$("#rangeinput").mousedown(function(event){
++++interval+=+setInterval(function(){
++++++++$("#output").html($("#rangeinput").val());
++++++++console.log("running");
++++},150);
});

$("#rangeinput").mouseup(function(event){
++++clearInterval(interval);
});|code-block|syntax|javascript|1988672|http://jsbin.com/vibuc/1/|offset|length|1988673|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|P|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

onchange works just fine , but I needed to update the value while sliding it.

<pre><code>var interval;
$("#rangeinput").mousedown(function(event){
 interval = setInterval(function(){
 $("#output").html($("#rangeinput").val());
 console.log("running");
 },150);
});

$("#rangeinput").mouseup(function(event){
 clearInterval(interval);
});
</code></pre>

<a href="http://jsbin.com/vibuc/1/" rel="nofollow">http://jsbin.com/vibuc/1/</a>

blocks|key|1988777|text|让我们向该集合添加一个简单的ES6替代方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1988778|let+timer;

const+debounceChange+=+(value,+callback)+=>+{
++++clearTimeout(timer);
++++timer+=+setTimeout(()+=>+callback(value),+500);
};|code-block|syntax|javascript|1988779|在JSX中使用时，它将如下所示：|1988780|<input+type="range"+onChange={e+=>+debounceChange(e.target.value,+props.onChange)}/>|1988781|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Let's add a simple ES6 alternative to the collection:

<pre class="lang-js prettyprint-override"><code>let timer;

const debounceChange = (value, callback) =&gt; {
 clearTimeout(timer);
 timer = setTimeout(() =&gt; callback(value), 500);
};
</code></pre>

When used in JSX it would look like this:

<pre><code>&lt;input type="range" onChange={e =&gt; debounceChange(e.target.value, props.onChange)}/&gt;
</code></pre>

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.

<hr>

Here's the code as it stands:

HTML:

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

JavaScript:

<pre><code>$(".slider").change(function() {
 $("#query").text($("form").serialize());
});
</code></pre>

Does that help?

onChange event for HTML5 range

jQuery

HTML5

目前，我的range输入上的onChange事件在每一步都会触发。有没有办法阻止这个事件触发，直到用户松开滑块？我正在使用范围来创建一个搜索查询。我希望能够在每次表单更改时运行搜索，但在滑块移动的每一步都发出搜索请求太多了。下面是代码原样：HTML：<div id="page"> Currently viewing page 1. <input

问HTML5范围的onChange事件
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5范围的onChange事件EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5范围的onChange事件
EN