是否可以专注于<div>使用 JavaScriptfocus()函数？
我有一个<div>标签
<div id="tries">You have 3 tries left</div>
我正在尝试<div>使用以下方法专注于上述内容：
document.getElementById('tries').focus();
但它不起作用。有人可以提出建议吗....？
是否可以使用 JavaScript focus() 函数将注意力集中在 <div> 上？
IT技术
javascript
focus
2021-01-17 14:17:43
6个回答
是的 - 这是可能的。为了做到这一点，您需要分配一个tabindex ...
<div tabindex="0">Hello World</div>
tabindex 为 0 会将标签放置在“页面的自然 Tab 键顺序中”。更高的数字会给它一个特定的优先级顺序，其中 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>显然，拥有一个可以通过脚本聚焦而其他输入法无法聚焦的元素是一种耻辱（特别是如果用户仅使用键盘或类似的限制）。还有一大堆标准元素在默认情况下是可聚焦的，并且具有语义信息以帮助用户。明智地使用这些知识。
window.location.hash = '#tries';
这将滚动到有问题的元素，本质上是“聚焦”它。
document.getElementById('tries').scrollIntoView()作品。这比window.location.hash 固定位置时效果更好。
您可以使用 tabindex
<div tabindex="-1" id="tries"></div>
tabindex 值可以允许一些有趣的行为。
- 如果给定值“-1”，则该元素不能被制表，但可以通过编程方式（使用 element.focus()）将焦点赋予该元素。
- 如果给定值为 0，则该元素可以通过键盘获得焦点并落入文档的 Tab 流中。大于 0 的值创建一个优先级，其中 1 是最重要的。
<div id="inner" tabindex="0">
this div can now have focus and receive keyboard events
</div>
其它你可能感兴趣的问题