javascript - 隐藏文本中的Ctrl+F : reveal the text

Question

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

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

无论是否搜索到容器中的不可见文本，我如何对 Ctrl+F 作出 react 并打开容器？

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

1. 监听 Ctrl+F。
   • 我有多个容器，只想扩展那些包含搜索词组的容器。听到 Ctrl+F 后，我只能一次打开所有容器。
   • 并不适用于所有系统。不过，这只是一个可以忽略不计的缺陷。
2. Chrome 特定的解决方法 ( link )
   • 至少还应该支持 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>

• Listening to browser Ctrl+F/find layout modifications

I don't think it is possible to listen to those layout modifications.

When the browser find an element, it is equivalent to call scrollIntoView for the matched element. Thus a scroll event will be fired only if the container div is scrollable.

In the example, the parent style is overflow: hidden;. Thus it does not trigger any scroll event.

It becomes then impossible to listen to these layout change, because the only workaround that exist to listen to scroll event on overflow:hiden element, is to listen to mouse wheel event ...

The bad story is that it is then impossible to prevent user from modifying layout through the browser find, because even if one can prevent Ctrl+F or F3, we can't prevent user from using the Edit-> Find menu in Firefox or IE

JBE

• Listen for Events from Browser "Find" Window in JavaScript

I don't know of any way you can listen for a find-like event and if that's supported in any browser it sure isn't a portable solution.

I also don't know what you're trying to achieve but I think that your best option is to listen for the keyboard events that trigger the find window and attempt to cancel them while attempting to emulate the find-toolbar/window with JavaScript of your own. This is however a herculean (and nearly impossible) task due to some browsers customization of keyboard shortcuts depending on the localization (for instance, in IE, en-US uses Ctrl+F (for Find) while pt-PT uses Ctrl+L (for Localizar, meaning find)).

Conclusion: I think you're out of luck there...

米格尔文图拉

• Searching for text (Ctrl+F) across hidden spans

• Chrome search feature (ctrl+f) finds hidden text ( but it's invisible! )