Question

我在Chrome 41中使用jQuery 2.1。我需要从输入滑块中获取值，因为它会发生变化;但是，当我使用jquery的change事件时，我只会在释放鼠标后从滑块中获取值，而不是在mousedown和drag中。

这个小例子说明了问题：

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

我想我可以通过在鼠标上/下事件上设置布尔值然后获取mousemove事件的值来提出修复。有更清洁的解决方案吗？

Answer 1

在现代浏览器中，您可以使用input事件：

$(document).on('input', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});

注意IE＆lt; 9不支持它，但它也不支持range输入

参考：MDN input - Event

的 DEMO

Answer 2

您可以收听change / input个事件：

Updated Example

当<input>或<textarea>元素的值发生变化时，会同步触发DOM input event。

当用户提交对元素值的更改时，<input>，<select>和<textarea>元素会触发change event。与input event不同，对于元素值的每次更改，都不一定会触发change事件。

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

我确信只听input event就足够了。

Answer 3

此外，如果您希望输入范围当前值随滑块移动，您可以尝试this solution。

Answer 4

这对我有用。这使用了JQuery和JS。

<header>
  <h1>HEADER</h1>
</header>
<div class="container">
  <div class="menu">
    <h3>MENU</h3>
    <span>ITEM 1</span>
    <span>ITEM 2</span>
    <span>ITEM 3</span>
    <span>ITEM 4</span>
    <span>ITEM 5</span>
  </div>
  <section class="content">
    <h2>CONTENT</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
  </section>
  <aside class="ads">
    <h2>AD</h2>
    <h2>AD</h2>
  </aside>
</div>
<footer>
  <h1>FOOTER</h1>
</footer>

在我看来，使用document.getElementById（）选择DOM元素并修改属性/值使您可以访问JQuery不能提供的某些属性。

在这种情况下，我无法使用上面的代码访问$("#slider").on("input change",(e)=>{ document.getElementById("label").value = `${e.target.value}`;});值并进行相应的更改，但是使用JQuery的选择器时，相同的代码将失败...尝试可互换地追加<input>，{{ 1}}，.val，.text都起作用，只有.innerText有效。

我不确定这是否与.html的属性有关，但是嘿，它起作用了。

Answer 5

作为2020年的更新，有些人可能会有所帮助。我遇到了一个实例，我想抓住滑块的当前值，因为用户更改了滑块的当前值，很多其他问题都回答了这个问题，但是作为替代。

我正在加载jQuery的其他功能，因此最终会混合使用普通JS和jQuery，但是如果不加载jQuery，可以很容易地修改为仅使用普通JS。

$("#number-slider").mousemove(function(){
    $("#slider-value").text(document.getElementById("number-slider").value);
})

滑块具有其自己的ID，该值是从该ID派生的，然后可以将该值发布到具有其自己的唯一ID的元素中。抓住价值之后，您可以做任何想做的事。

一些注意事项：

jQuery Val无法在滑块更改后（或似乎在任何时候）引用其当前值，而attr将仅获取初始值。因此，如果要检索该值，则必须使用javascript默认的getElementById函数。
Mousemove in jQuery基本上允许您伪造可拖动事件，其中，只要鼠标在滑块上移动，它就会主动检查该值。如果该值发生更改，则您可以在用户与其进行交互时使用该值更改为的可视元素（或任何背景功能）进行更新。如果要将其转换为纯净/纯JS，则可以实现onmousemove event.
每次在元素或文档中移动鼠标时运行功能或事件都会变得有些沉重，具体取决于您正在执行的操作会导致浏览器滞后或其他问题。因此，如果您不需要某种持续的视觉更新，则可以在jQuery中使用change() function或在Vanilla JS中使用onchange event，只有在从滑块和新的鼠标中释放鼠标后，才会更新数据值输入到内存/检测到更改。
您也许也可以使用某种mousedown / mouseup跟踪样式来检测这些更改，但是我没有尝试任何更改，因为示例实现对我来说足够了，只不过把它扔在那里。

Answer 6

$('#slider').change(function(){
$('#slider_value').text($(this).val());
});

如何在更改期间使用jquery获取输入范围？

6 个答案: