怎么利用 focus-within 伪类在 HTML 编辑器激活时自动展开扩展面板-html教程-PHP中文网

:focus-within仅在元素内部任意子元素获得焦点时触发，要求编辑器设contenteditable="true"、扩展面板为dom子元素、兼容旧浏览器需@supports+js fallback。

怎么利用 focus-within 伪类在 html 编辑器激活时自动展开扩展面板

focus-within 触发条件必须满足“焦点落在子元素”

:focus-within 不会因为父容器本身获得焦点而生效，它只在**该元素内部任意子元素获得焦点**时触发。HTML 编辑器（比如 contenteditable 元素）本身不能直接接收焦点，但它的子节点（如 br、span、或用户输入产生的文本节点）可以——前提是编辑器已启用交互能力。

常见错误是给编辑器容器加 tabindex="0" 后以为它“有焦点”，结果 :focus-within 仍不生效：因为焦点真正在子节点上，而容器没设 contenteditable 或没正确初始化可编辑状态。

确保编辑器根元素设了 contenteditable="true"（不是仅靠 tabindex）
避免用 display: none 隐藏扩展面板——:focus-within 仍会匹配，但隐藏后无法显示；改用 visibility: hidden 或 opacity: 0 + pointer-events: none
若编辑器由第三方库（如 Slate、Draft.js）管理，其内部焦点可能被劫持，需确认焦点最终落在真实 DOM 子元素上

扩展面板必须是编辑器容器的 DOM 子元素

:focus-within 的作用域严格限于“当前元素及其后代”。如果扩展面板放在编辑器容器外部（比如用 Portal 渲染到 body 下），即使逻辑相关，CSS 也无法响应。

典型错误结构：

<div class="editor"></div>
<div class="toolbar"></div>

正确结构应为：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<div class="editor-wrapper">
  <div class="editor" contenteditable="true"></div>
  <div class="toolbar"></div>
</div>

.editor-wrapper:focus-within .toolbar 才能生效
若必须脱离 DOM 层级（例如避免样式污染），可用 JavaScript 监听 focusin 事件并手动 toggle 类名，而非强依赖 :focus-within
注意 Shadow DOM 场景：:focus-within 不穿透 shadow boundary，扩展面板若在 shadow root 内，需在 shadow 内部写规则

IE 和旧版 Safari 不支持 focus-within，需降级处理

:focus-within 在 Chrome 60+、Firefox 61+、Safari 15.4+ 支持良好，但 Safari 15.2 及更早版本、所有 IE 版本完全不识别该伪类——会导致扩展面板始终不可见。

不能只靠 CSS 实现兼容：

用 @supports (selector(:focus-within)) 包裹原生规则，再为不支持环境提供 JS fallback
JS fallback 示例：监听 editor 的 focusin 和 focusout，动态添加/移除 is-focused 类，CSS 用 .editor-wrapper.is-focused .toolbar
避免在 JS 中频繁操作 classList 导致重排；用 requestIdleCallback 或节流处理高频率焦点切换

contenteditable 元素的焦点行为比 input 更难预测

用户点击编辑器空白处、按 Tab 进入、用 JS 调用 focus()、甚至粘贴后光标位置变化，都可能影响 :focus-within 是否触发。某些情况下（如空编辑器首次点击），焦点可能短暂落在 body 上再转移，造成闪动或失效。

初始化时主动调用 editor.focus() 并确保光标落点明确（例如插入 <br> 或零宽空格）
避免编辑器内嵌 input、button 等可聚焦元素——它们抢走焦点后 :focus-within 仍生效，但用户预期可能是“编辑器内容区聚焦才展开”，此时需额外判断 event.target 是否属于编辑内容区域
移动端 Safari 对 contenteditable 的焦点事件触发不稳定，建议加一层 setTimeout 延迟检测，或改用 selectionchange 事件辅助判断