如何使用 Javascript 聚焦范围滑块？

Question

我希望能够专注于“范围”类型的输入元素，换句话说，默认滑块，这样就可以拖动滑块而不用户实际点击它。

显而易见的解决方案是只使用 sliderelement.focus()。然而，这是行不通的。
我发现 here 这样做的原因是我必须在滑块的句柄上调用此方法。
slider handle的class应该是'ui-slider-handle'。

但是由于某种原因 document.querySelector('.ui-slider-handle') returns null.
奇怪的是，当我使用 $('.ui-slider-handle').

时，这个 确实与 JQuery 一起工作我做了 this fiddle 来澄清我的问题。我只想使用 Javascript.

来解决这个问题

--- 编辑 ---
也许我的解释不够清楚。 class ui-slider-handle 不是我添加到滑块手柄的自定义 class，因为我无法访问该手柄。根据我找到的答案（我之前说过），我预计这是默认值 class。

Answer 1

在您的 fiddle 中，querySelector 是正确的。

你的 jQuery 将永远 return 如此。

例如，将 var handle2 = document.querySelector('.ui-slider-handle'); 更改为类似 var handle2 = document.querySelector('.ui-slider-handlesdfsdfsdfsdf'); 的虚构 class，并且 return 是正确的。

如果你想检查一个元素是否存在，你可以使用.length。

所以只需将 .length 添加到您的选择器，它们都会 return false。

var handle1 = $('.ui-slider-handle').length;
var handle2 = document.querySelector('.ui-slider-handle');

$('#1').html('JQuery, handle found: ' + (handle1 ? 'true' : 'false'))
$('#2').html('Javascript, handle found: ' + (handle2 ? 'true' : 'false'))

要将焦点放在范围元素上，只需使用 .focus().

这是一个例子。使用按钮和箭头键可以看到它 gaining/losing 聚焦在元素上。

function getFocus() {
  document.getElementById("myRange").focus();
}

function loseFocus() {
  document.getElementById("myRange").blur();
}

<input type="range" id="myRange" value="50">

<p>Click the buttons below to give focus and/or remove focus from the slider control.</p>

<button type="button" onclick="getFocus()">Get focus</button>
<button type="button" onclick="loseFocus()">Lose focus</button>

如何使用 Javascript 聚焦范围滑块？

How to focus on a range slider using Javascript?

javascript

jquery

html

rangeslider