HTMLElement.focus()中‘可见’的判定标准是什么？

调用HTMLElement.focus()时，元素若不满足特定状态，常会出现聚焦无响应或焦点跳回<body>的问题。这一细节未在MDN的focus()文档中明确说明，且WHATWG的相关规范表述晦涩。针对你总结的聚焦条件，结合规范和实际测试逐一验证如下：

你提出的条件验证 #

• visibility: hidden判定：visibility: hidden的元素仍可通过focus()成功聚焦（document.activeElement会指向该元素），只是视觉不可见。因此该条件不是聚焦失败的必要原因。
• display: none判定：正确。设置display: none的元素不在渲染树中，完全无法被聚焦，调用focus()必然失败。
• 尺寸判定（width>0且height>0）：不准确。元素尺寸为0（比如空元素无内边距/边框）但在渲染树中时，若属于可聚焦类型仍能被聚焦；另外，视口外的可见元素也可被脚本聚焦。
• offsetParent !== null判定：错误。position: fixed的元素offsetParent为null，但这类元素可正常被聚焦，因此该条件不成立。
• 拥有tabindex属性：不完全正确。原生可聚焦元素（如<input>、<button>、带href的<a>）无需设置tabindex即可被聚焦；仅非原生可聚焦元素（如<div>）需设置tabindex≥0才能成为可聚焦元素。

规范明确的可聚焦核心要求 #

根据WHATWG聚焦步骤的定义，元素成功聚焦需满足：

1. 属于可聚焦元素：包括原生表单控件、带有效href的链接、tabindex≥0的元素等。
2. 未被禁用（无disabled属性）。
3. 自身及所有祖先元素均未设置display: none。
4. 未被标记为aria-hidden="true"（部分浏览器会以此限制聚焦）。

内容的提问来源于stack exchange，提问作者Maxim Therrien