Ctrl+F in hidden text: reveal the text

Question

I have containers with multiple lines but only the first one visible (overflow:hidden). The container is expandable upon a click. (See https://stackoverflow.com/a/6972830 and the jsFiddle http://jsfiddle.net/JUtcX/2/)

If someone performs a Ctrl+F with text from the non-visible lines, the browser reports a match but cannot show it (because it's hidden).

How can I react to Ctrl+F and open the container whether a non-visible text in it was searched for?

[Update] Approaches that do not meet all requirements:

1. Listening for Ctrl+F.
   • I have multiple containers and only want to expand those containing the search phrase. Upon listening for Ctrl+F I could only open all containers at once.
   • Does not work on all systems. This is a negligible defect only, though.
2. Chrome-specific workaround (link)
   • At least also Firefox should be supported

Answer 1

You can do something like this:

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...

Miguel Ventura

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

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