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

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

我有一个<div>标签

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

我正在尝试着重于上述<div>使用：

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

但这是行不通的。有人可以建议....？

window.location.hash = '#tries';

这将滚动到所讨论的元素，实质上是“聚焦”它。

是的-这是可能的。为此，您需要分配一个tabindex ...

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

tabindex为0会将标记“置于页面的自然制表符顺序”。较高的数字将赋予其特定的优先级顺序，其中1表示第一优先级，2表示第二优先级，依此类推。

您还可以将tabindex设置为-1，这将使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>

显然，拥有可以通过脚本聚焦的元素而不能通过其他输入法聚焦的元素（特别是如果用户仅使用键盘或受到类似限制的情况）是可耻的。还有许多标准元素在默认情况下是可聚焦的，并且嵌入了语义信息以帮助用户。明智地使用此知识。

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

您可以使用tabindex

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

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

• 如果给定的值为“ -1”，则无法将其设置为选项卡，但可以通过编程方式（使用element.focus（））将焦点赋予该元素。
• 如果给定值为0，则该元素可以通过键盘进行聚焦并落入文档的制表流程中。大于0的值会创建优先级，其中1是最重要的。

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

我想提出类似Michael Shimmin的建议，但不对元素或适用于它的CSS进行硬编码。

我只使用jQuery来添加/删除类，如果您不想使用jquery，则只需要替换add / removeClass

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

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

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

要使边框闪烁，可以执行以下操作：

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

这将使边框变成红色，持续1秒钟，然后再次将其删除。