如何在使用 jquery 更改期间获取输入范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28932238/
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
How to get input range during change with jquery?
提问by Matt Hancock
I'm using jQuery 2.1 in Chrome 41. I need to get the values from an input slider as it changes; however, when I use the change event with jquery, I only get the value from the slider after the mouse is released, not during the mousedown and drag.
我在 Chrome 41 中使用 jQuery 2.1。我需要在输入滑块更改时从它获取值；但是，当我在 jquery 中使用 change 事件时，我只在释放鼠标后从滑块中获取值，而不是在鼠标按下和拖动期间。
This small example illustrates the problem:
这个小例子说明了这个问题：
<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />
<br />
<span id="slider_value">Nothing yet.</span>
<script>
$(document).on('change', '#slider', function() {
$('#slider_value').html( $(this).val() );
});
</script>
I think I could come up with a fix by setting a boolean on mouse up/down events and then getting the values on mousemove events. Is there a cleaner solution?
我想我可以通过在鼠标向上/向下事件上设置一个布尔值然后获取 mousemove 事件的值来解决这个问题。有更清洁的解决方案吗？
回答by charlietfl
In modern browsers you can use the inputevent:
在现代浏览器中，您可以使用该input事件：
$(document).on('input', '#slider', function() {
$('#slider_value').html( $(this).val() );
});
Note that IE < 9 does not support it but neither does it support rangeinput
请注意，IE < 9 不支持它但也不支持range输入
Reference: MDN input - Event
参考：MDN 输入 - 事件
回答by Josh Crozier
You could listen to the change/inputevents:
The DOM
inputeventis fired synchronously when the value of an<input>or<textarea>element is changed.
当或元素的值发生更改时，DOM
input事件会同步触发。<input><textarea>
The
changeeventis fired for<input>,<select>, and<textarea>elements when a change to the element's value is committed by the user. Unlike theinputevent, the change event is not necessarily fired for each change to an element's value.
当用户提交对元素值的更改时，将针对、和元素触发该
change事件。与event不同，change 事件不一定为元素值的每次更改而触发。<input><select><textarea>input
$(document).on('input change', '#slider', function() {
$('#slider_value').html( $(this).val() );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />
<br />
<span id="slider_value"></span>I'm sure listening to the inputeventalone would suffice too.
我敢肯定，单独听这个input活动也足够了。
回答by drugan
Also, if you want the input range current value to move with slider, you may try this solution.
此外，如果您希望输入范围当前值随滑块移动，您可以尝试此解决方案。
回答by Memeisme
This worked for me. this uses JQuery and JS.
这对我有用。这使用 JQuery 和 JS。
$("#slider").on("input change",(e)=>{
document.getElementById("label").value = `${e.target.value}`;});
It seems to me that selecting DOM elements and modifying attributes/values using the document.getElementById() gives you access to some attributes that JQuery doesnt..
在我看来，使用 document.getElementById() 选择 DOM 元素和修改属性/值可以让您访问一些 JQuery 没有的属性。
In this case Im able to access the <input>value and change it accordingly by using the above code but that same code fails when using JQuery's selector... tried to interchangeably append .val,.text,.innerText,.htmlon both and only document.getElementById().textworked.
在这种情况下，我可以<input>通过使用上面的代码访问该值并相应地更改它，但是在使用 JQuery 的选择器时，相同的代码失败了......试图在两者上交替附加.val, .text, .innerText,.html并且只能document.getElementById().text工作。
Im not sure if this has to do with <input>'s attributes but hey it worked.
我不确定这是否与<input>的属性有关，但嘿它有效。
回答by Godwin J
$('#slider').change(function(){
$('#slider_value').text($(this).val());
});
