是否可以使用JavaScript focus（）函数专注于<div>？

javascript focus

2022-08-30 00:08:02

是否有可能专注于使用JavaScript函数？<div>focus()

我有一个标签<div>

<div id="tries">You have 3 tries left</div>

我试图专注于上述使用：<div>

document.getElementById('tries').focus();

但它不起作用。有人可以建议一些东西吗？

答案 1

是的 - 这是可能的。为此，您需要分配一个选项卡索引...

<div tabindex="0">Hello World</div>

Tabindex 为 0 会将标记“按页面的自然 Tab 键顺序”放置。较大的数字将为其提供特定的优先级顺序，其中 1 将是第一个，2 将是第二个，依此类推。

您还可以提供 -1 的 tabindex，这将使 div 只能通过脚本而不是用户进行聚焦。

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

显然，有一个你可以通过脚本聚焦的元素是一种耻辱，而你不能用其他输入法来聚焦（特别是如果用户只有键盘或类似的约束）。还有一大堆标准元素，默认情况下是可聚焦的，并且具有语义信息以帮助用户。明智地使用这些知识。

答案 2

window.location.hash = '#tries';

这将滚动到有问题的元素，本质上是“聚焦”它。