Excluding text contents from Ctrl+F search in the browser

How to make Ctrl+F search disregard matches in specified container elements

Recently inert attribute has been added to the HTML specification. The contents of inert elements cannot be selected or clicked. First it was not the case, but now the browser ignores the text contents within inert elements while searching for matches to the expressions entered into the Ctrl+F search box (officially referred to as the find-in-page feature).

When I posted this article a year ago, the inert attribute did not prevent the find-in-page from searching inside the element. But now the situation has changed.

Why hide text from Ctrl+F?

In web applications contents of some tiny element, a table row or a label in a form, are expanded or detailed in a popup upon a click. If users launch the find-in-page when a popup is opened, it is always because they want to search specifically inside the contents of the popup and not elsewhere in the page.

For example, a sample web page 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.

Let’s see if the find-in-page finds text in inert elements.

When the popup gets opened the div with the main content gets assigned inert attribute:

And the find box nicely disregards the contents outside the popup.

When the popup is hidden, the inert attribute is removed and the main content becomes searchable again: