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|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|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|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|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|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|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|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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

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

问HTML5范围的onChange事件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5范围的onChange事件EN