隐藏文本中的Ctrl+F:显示文本

Ctrl+F in hidden text: reveal the text

本文关键字：文本 显示 Ctrl+F 隐藏      更新时间：2023-09-26

我有多个行，但只有第一个可见的容器(overflow:hidden)。这个容器点击一下就可以展开。(参见https://stackoverflow.com/a/6972830和jsFiddle http://jsfiddle.net/JUtcX/2/)

如果有人对不可见行的文本执行Ctrl+F，浏览器会报告匹配，但不会显示它(因为它是隐藏的)。

我如何对Ctrl+F作出反应并打开容器是否在其中搜索了不可见的文本?

(更新)不满足所有要求的方法:

  1. 监听Ctrl+F。
    • 我有多个容器，只想扩展那些包含搜索短语。在监听Ctrl+F时，我只能一次打开所有容器。
    • 不能在所有系统上工作。不过，这只是一个可以忽略不计的缺陷。
  2. chrome专用解决方案(link)
    • 至少也应该支持Firefox

你可以这样做:

function find(e) {
    if (e.ctrlKey && e.keyCode == 70) {
        document.getElementById("hide").style.display = "block";
    }
}
document.addEventListener('keyup', find, false);
#hide{
  display: none;
}
<div>
  ASDF:
  <div id="hide">
    Hidden
  </div>
</div>

  • 监听浏览器Ctrl+F/查找布局修改

我认为不可能听到那些布局修改。

当浏览器找到一个元素时，相当于调用匹配元素的scrollIntoView。因此，滚动事件将是仅当容器div可滚动时触发。

在示例中，父样式是overflow: hidden;确实如此不触发任何滚动事件。

就不可能听到这些布局的变化，因为唯一的解决方法是监听滚动事件溢出:隐藏元素，是监听鼠标滚轮事件…

糟糕的是，这样就不可能阻止用户修改布局通过浏览器查找，因为即使一个也可以如果不使用Ctrl+F或F3，我们无法阻止用户使用编辑->查找菜单

JBE

  • 从浏览器中监听事件"查找"JavaScript中的窗口

我不知道有什么方法可以监听一个find-like事件，如果这在任何浏览器中都支持，这肯定不是一个可移植的解决方案。

我也不知道你想达到什么目的，但我认为你的最好的选择是监听触发查找的键盘事件窗口，并在尝试模拟用JavaScript编写查找工具栏/窗口。然而，这是一个由于某些浏览器的原因，这是一项艰巨的(几乎不可能的)任务根据本地化自定义键盘快捷键(for例如，在IE中，en-US使用Ctrl+F(用于查找)而pt-PT使用Ctrl+L(对于Localizar，意思是查找))

结束语:我认为你运气不好……

米格尔·文图拉

  • 搜索文本(Ctrl+F)跨隐藏范围

  • Chrome搜索功能(ctrl+f)发现隐藏文本(但它's不可见!)

相关文章：