如何在CSS或JavaScript中检测Ctrl-F搜索的文本聚焦状态？

你目前的实现能让隐藏文本被浏览器查找功能检索到，但无法直观提示用户对应位置，核心问题在于浏览器的查找选中状态并不会触发常规的CSS聚焦/选中伪类，这里提供两种可行的解决方案：

方案1：通过JavaScript监听文本选中状态 #

浏览器执行Ctrl-F查找时，会自动选中匹配的文本片段，我们可以监听selectionchange事件来检测选中内容是否属于隐藏元素，进而高亮对应的单元格：

调整HTML结构（给单元格加标识） #

<td class="content-cell">
  <label class="showlong">显示长文本？<input type="checkbox" /></label>
  <span class="hidden">这里是需要隐藏的超长内容，用于测试浏览器查找功能</span>
</td>

JavaScript代码 #

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  // 检查选中内容是否在隐藏元素内
  const hiddenEl = range.commonAncestorContainer.closest('.hidden');

  // 移除所有之前的高亮
  document.querySelectorAll('.content-cell.search-highlight').forEach(cell => {
    cell.classList.remove('search-highlight');
  });

  if (hiddenEl) {
    // 找到对应的单元格并添加高亮类
    const targetCell = hiddenEl.closest('.content-cell');
    targetCell.classList.add('search-highlight');
    // 可选：自动展开隐藏内容
    // hiddenEl.previousElementSibling.querySelector('input').checked = true;
  }
});

配套CSS #

/* 单元格高亮样式 */
.search-highlight {
  background-color: #ffeb3b;
  outline: 2px solid #fbc02d;
  transition: background-color 0.2s;
}

/* 你的原有隐藏样式保留 */
.hidden {
  display: block;
  height: 0;
  width: 0;
  overflow: hidden;
}
label.showlong:has(input:checked) ~ .hidden {
  display: inline;
}

方案2：优化隐藏元素的CSS实现，让浏览器默认高亮生效 #

你当前用height:0; width:0的方式会把浏览器的查找高亮也隐藏掉，改用以下方式隐藏元素，既能保持布局不被打乱，又能让浏览器的默认高亮可见：

修改后的CSS（绝对定位方案） #

.hidden {
  /* 用绝对定位把元素移出可视区域，不占据布局空间 */
  position: absolute;
  left: -9999px;
  top: auto;
}

label.showlong:has(input:checked) ~ .hidden {
  position: static;
  left: auto;
}

可选：clip-path方案（兼容性稍差但更灵活） #

.hidden {
  clip-path: inset(100% 100% 100% 100%);
  position: relative;
}

label.showlong:has(input:checked) ~ .hidden {
  clip-path: none;
}

这种方式下，当浏览器找到隐藏文本时，会在原位置显示默认的查找高亮，用户能直接定位到单元格位置，无需额外JS逻辑。

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