如何使用 Javascript 关注范围滑块？

Question

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

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

但由于某种原因document.querySelector('.ui-slider-handle')返回null。
奇怪的是，当我使用$('.ui-slider-handle') 时，这确实适用于 JQuery。

我做了this fiddle 来澄清我的问题。我想只使用 Javascript 来解决这个问题。

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

Answer 1

在您的小提琴中，querySelector 是正确的。

尽管如此，您的 jQuery 将始终返回 true。

例如，将 var handle2 = document.querySelector('.ui-slider-handle'); 更改为 var handle2 = document.querySelector('.ui-slider-handlesdfsdfsdfsdf'); 这样的组合类，它会返回 true。

如果要检查元素是否存在，可以使用 .length。

所以只需将 .length 添加到您的选择器中，它们都会返回 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()。

这是一个例子。使用按钮和箭头键来查看它正在获得/失去对元素的关注。

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>