Ctrl + F in hidden text: show text

Question

I have containers with several lines, but only the first view ( overflow:hidden). The container expands on click. ( https://stackoverflow.com/questions/303088/... and jsFiddle http://jsfiddle.net/JUtcX/2/ )

If someone executes Ctrl + F with text from invisible lines, the browser reports a match, but cannot show it (because it is hidden).

How can I react to Ctrl + F and open the container, was there a search for invisible text in it?

[Update] Approaches that do not meet all the requirements:

• Listening Ctrl + F.
  • I have several containers and you only want to expand the ones that contain the search phrase. When listening to Ctrl + F, I could immediately open all the containers.
  • It does not work on all systems. However, this is a minor defect.
• Workaround for Chrome ( link )
  • At least Firefox must 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>

Run codeHide result

• Listening to the browser Ctrl + F / search for layout changes

I don’t think you can listen to these layout changes.

When the browser finds an element, it is equivalent to calling scrollIntoView for the associated element. Thus, the scroll event will only fire if the div container scrolls.

In the example, the parent style is overflowing: hidden ;. Therefore, it does not fire any scroll event.

, , overflow: hiden element, ...

, , Ctrl + F F3, Edit- > Find Firefox IE

JBE

• "" JavaScript

, , , , , , .

, , , , , find-toolbar/window JavaScript. , , ( ) - ( , IE, en-US Ctrl + F ( ), pt-PT Ctrl + L ( Localizar, find)).

: , ...

• (Ctrl + F)

• Chrome (ctrl + f) ( !)