Ctrl + F隐藏文本：显示文本

Question

我有多行的容器，但只有第一个可见的（overflow:hidden）。单击即可扩展容器。（请参阅/sf/answers/488098131/和jsFiddle http://jsfiddle.net/JUtcX/2/）

如果有人用不可见行中的文本执行Ctrl + F，则浏览器将报告匹配项，但无法显示该匹配项（因为它已隐藏）。

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

[更新]不满足所有要求的方法：

1. 监听Ctrl + F。
   • 我有多个容器，只想扩展包含搜索短语的容器。侦听Ctrl + FI时只能一次打开所有容器。
   • 不适用于所有系统。但是，这只是可以忽略的缺陷。
2. Chrome特定的解决方法（链接）
   • 至少也应该支持Firefox

Answer 1

你可以这样做：

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，我们也无法阻止用户使用 Firefox 或 IE 中的“编辑”->“查找”菜单

杰贝

• 在 JavaScript 中监听浏览器“查找”窗口的事件

我不知道有什么方法可以侦听类似查找的事件，如果任何浏览器都支持该事件，那么它肯定不是一个可移植的解决方案。

我也不知道你想要实现什么，但我认为你最好的选择是监听触发查找窗口的键盘事件并尝试取消它们，同时尝试使用 JavaScript 模拟查找工具栏/窗口你自己。然而，这是一项艰巨（而且几乎不可能）的任务，因为某些浏览器会根据本地化情况自定义键盘快捷键（例如，在 IE 中，en-US 使用 Ctrl+F（用于查找），而 pt-PT 使用 Ctrl+L（对于 Localizar，意思是查找））。

结论：我认为你运气不好......

米格尔·文图拉

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

• Chrome 搜索功能 (ctrl+f) 可找到隐藏文本（但它是不可见的！）