Javascript JQuery 范围输入侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10473554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Range Input Listener
提问by Devin Dixon
Hey having a little trouble jquery and the hmtl5 range. I'm try to get the values as they changed but the event listener is not capturing it. Currently my code is:
嘿，jquery 和 hmtl5 范围有点麻烦。我试图在值发生变化时获取它们，但事件侦听器没有捕获它。目前我的代码是：
HTML
HTML
html += '<li>Apply Credits: <input type="range" min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'
And the JS is:
JS是：
$('#discount_credits').mousewheel( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
I've also tried
我也试过
$('#discount_credits').change( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
Neither seem to work. Am I doing something wrong?
两者似乎都不起作用。难道我做错了什么？
回答by Brian
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
This fires the changeevent on every inputevent.
这会change在每个input事件上触发事件。
回答by u283863
Does not seem to have any problem on HTML5 <input type="range">using change.
似乎没有对HTML5任何问题<input type="range">使用change。
回答by Mahshid Zeinaly
I assume your span has an id: <span id="slidernumber">...</span>Lets also assume that you have a few sliders, and you want to see a text change if any of them were moved:
我假设您的跨度有一个 id：<span id="slidernumber">...</span>让我们还假设您有几个滑块，并且您希望在其中任何一个被移动时看到文本更改：
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
</li>
<span id="slidernumber">50</span>
Try this:
尝试这个：
$(document).ready(function(){
$("[type=range]").change(function(){
var newval=$(this).val();
$("#slidernumber").text(newval);
});
});
http://jsfiddle.net/MahshidZeinaly/CgQ5c/
http://jsfiddle.net/MahshidZeinaly/CgQ5c/
Now lets assume that you have a few sliders, but you want to see a text change if a particular one of them were moved. (I assume it because the range input is inside li tag, and you gave it a name):
现在让我们假设您有几个滑块，但是如果移动了其中的一个，您希望看到文本更改。（我假设它是因为范围输入在 li 标签内，并且您给它起了一个名字）：
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
Try this:
尝试这个：
$(document).ready(function(){
$("[type=range]").change(function(){
var newv=$(this).val();
$(this).next().text(newv);
});
});
回答by Chase
The on change event seems to be working correctly for me: http://jsfiddle.net/zV3xD/7/
on change 事件似乎对我来说正常工作：http: //jsfiddle.net/zV3xD/7/
<input type="range" min="0" max="100" name="discount_credits" id="discount_credits" />
<span id="newValue" value="0">0</span>
$('#discount_credits').change( function() {
var newValue = this.value;
$('#newValue').html(newValue);
});?
Or you can try something like this:
或者你可以尝试像这样：
<form oninput="result.value=parseInt(a.value)">
<input type="range" name="a" value="50" /> =
<output name="result">0</output>
</form>
Using the outputexample here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output
使用output这里的例子：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/output
回答by Naelson Gon?alves Saraiva
Several test and bug fixed!
几个测试和错误修复！
$('input[name=form_range]').change('mousestop',function () {
});
