切换浏览器标签页失焦导致纯CSS菜单可编辑子元素消失如何解决

问题原因 #

当前实现依赖:focus-within伪类控制子元素显示，当用户切换到其他浏览器标签页时，当前页面的元素焦点会被浏览器主动释放，切回页面时焦点不会自动回到之前的contenteditable子元素上，因此.parent:focus-within匹配失效，子元素回到隐藏状态。

解决方案 #

方案1：添加少量JS全浏览器兼容（推荐） #

完全不改动原有HTML结构，仅新增少量JS和1行CSS即可实现需求：

1. 新增CSS规则（和原有:focus-within规则平级放置即可）：

.parent.child-editing > .child {
  display: flex;
}

2. 新增JS逻辑：

const parent = document.querySelector('.parent')
const editableChild = parent.querySelector('.child[contenteditable]')
let isEditing = false

// 记录编辑状态
editableChild.addEventListener('focus', () => {
  isEditing = true
  parent.classList.add('child-editing')
})
editableChild.addEventListener('blur', () => {
  // 仅当页面未切走时才清除状态，过滤切换标签导致的blur事件
  if (document.visibilityState !== 'hidden') {
    isEditing = false
    parent.classList.remove('child-editing')
  }
})
// 切回页面时如果之前处于编辑状态，自动恢复子元素焦点
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible' && isEditing) {
    editableChild.focus()
  }
})

方案2：纯CSS适配（需浏览器支持:has()伪类） #

如果不需要兼容2022年之前的浏览器版本，可以直接修改原有CSS的触发规则，无需引入JS：

/* 替换原有.parent:focus-within > .child规则即可 */
.parent:is(:focus-within, :has(:focus-visible)) > .child {
  display: flex;
}

该方案利用:has()直接匹配子元素的聚焦状态，切换标签页后的状态保留率比单纯的:focus-within更高。

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