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>

如何使用JavaScript专注于范围滑块？

1 个答案: