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

Question

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

我有一个<div>标签

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

我试图专注于以上<div>使用:

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

但它不起作用.有人可以提出建议....

Answer 1

是的 - 这是可能的.为了做到这一点,你需要分配一个tabindex ...

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

显然,拥有一个可以通过脚本聚焦的元素是一种耻辱,你无法通过其他输入法聚焦(特别是如果用户只是键盘或类似的约束).还有一大堆标准元素默认是可聚焦的,并且具有语义信息以帮助用户.明智地使用这些知识.

Answer 2

window.location.hash = '#tries';

这将滚动到有问题的元素,基本上"聚焦"它.

Answer 3

document.getElementById('tries').scrollIntoView()作品.这比window.location.hash 固定定位时效果更好.

Answer 4

您可以使用tabindex

<div tabindex="-1"  id="tries"></div>

tabindex值可以允许一些有趣的行为.

• 如果给定值为"-1",则元素不能被选项卡,但可以通过编程方式将焦点赋予元素(使用element.focus()).
• 如果给定值0,则元素可以通过键盘聚焦并落入文档的标签流中.大于0的值创建优先级,1是最重要的.

Answer 5

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Answer 6

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>