如何在 JavaScript 中使 `` 元素可聚焦？

访问

上的焦点通过 JavaScript 的元素

尽管某些元素（例如输入和按钮）具有固有的可聚焦性，但本质上不可能聚焦在

上。使用 JavaScript focus() 函数的元素。

分配 TabIndex

要在

上启用焦点，必须为其分配一个 tabindex 属性，该属性确定它在页面 Tab 键顺序中的位置。分配 tabindex 为 0 允许用户或通过 JavaScript 获得焦点。

<code class="html"><div id="tries" tabindex="0">You have 3 tries left</div></code>

使用 JavaScript 设置焦点

分配 tabindex 后，元素可以使用 focus() 函数以编程方式聚焦：

<code class="javascript">document.getElementById('tries').focus();</code>

注意事项

• tabindex 为 -1 使得元素只能通过 JavaScript 聚焦，而不是通过用户交互。
• 可聚焦元素可以接收键盘事件和焦点样式（例如，更改背景颜色）。
• 避免将 tabindex 分配给出于可访问性问题而不应由用户聚焦的元素。

示例

以下示例演示焦点分配和视觉提示：

<code class="html"><style>
div:focus {
    background-color: Aqua;
}
</style>

<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" onclick="document.getElementById('scripted').focus();">Set Focus To Element Z</div></code>

以上是如何在 JavaScript 中使 `` 元素可聚焦？的详细内容。更多信息请关注PHP中文网其他相关文章！