Hiding text from Ctrl+F in a browser

There is still no easy way hide a web page contents from find-in-page

Marian Čaikovski

--

In HTML specification Ctrl+F feature has a term find-in-page, so I use this term in my text.

Recently inert attribute has been added to the HTML specification. The contents of inert elements cannot be selected or clicked. Additionally, the specification gives hope for a feature that users and developers would appreciate — the browser may ignore the inert node for the purposes of find-in-page. Let’s see if find-in-page in the most common browser Chrome find text in inert elements.

You can play with the sample page here https://findinpage.onrender.com/inert.html. The point in this sample page is that sometime it would be convenient for users if Ctrl+F disregarded the text outside the popup. The sample application contains a table with descriptions of HTML tags. The descriptions are too big to fit into a one-row cell. But when a cell with a truncated description is clicked, the entire description is shown in the popup. Then the user might want to search for some keyword specifically in the expanded description. It is nice the the all the matches get highlighted in yellow, but a thousand of the matches outside the popup make the arrows in the find-in-page box not useful.

As you see, unfortunately, inert attribute does not prevent find-in-page from finding text. So developers have to continue using workarounds.

A complicated but reliable approach to make text unfindable is to show the text using content CSS property. This technique is demonstrated in another version of my sample page https://findinpage.onrender.com/content.html. When the popup opens, text from each table cell is copied to custom data-txt attribute of the same cell. When the popup closes, the value from data-txt attribute is assigned back to innerHTML of the same cell.

--

--

Marian Čaikovski

Java, JavaScript and SQL developer. Interested in data collection and visualization.