CODEWITHSUNDEEP
javascripthtmlcss
DOOManiac
DOOManiac

Reputation: 6284

HTML: Can you hide/ignore text elements from browser Find (CTRL+F)

I've got a web app with a fairly complicated UI, and a portion of the screen reserved for content.

If possible, I would like to make it so that when the user uses the browser's built-in text searching (CTRL+F), any text in the UI is ignored and only the actual content is searched.

Is this doable? CSS and JavaScript are acceptable

(I realize I could probably render the text to a <canvas> but it isn't worth the effort there)

Upvotes: 18

Views: 2953

Answers (4)

Viktor Mukhachev
Viktor Mukhachev

Reputation: 503

Use inert attribute:

<div inert>
   Try to search this with Ctrl+F
</div>

In older Chrome versions inert was not working that way.

Upvotes: 0

Kijewski
Kijewski

Reputation: 26022

To expand on nullability's answer: You can also store the text in a data attribute like that:

.css-text [data-content]:before {
    content: attr(data-content);
}
<div class="css-text">
    Hello, <span data-content="World"></span>!
</div>

Cf. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access

Upvotes: 5

nullability
nullability

Reputation: 10677

You could inject your UI text using the CSS content property. Generated text like this is not searchable since it is part of the document style rather than the content.

For example:

If you have a button in your UI such as <button id="dosomething"></button> you could add some non-searchable text inside it using the following CSS:

#dosomething:before {
    content: "Click Me";
}

I've created a fiddle to demonstrate how this works: http://jsfiddle.net/3xENz/ Note that it even works with <a> tags.

I recommend you stick with the :before selector because it works in IE8, while the :after selector does not.

If you have a more complex UI element, you can also add another element inside of it to hold the text content. For example:

<div id="complexcontrol"><div class="text"></div></div>

with the following CSS:

#complexcontrol .text:before {
    content: "Click Me";
}

Since screen readers probably won't process these styles properly you will still have the same accessibility problems as you would have with images, but it would be much easier to maintain and also allows a more responsive design.

Upvotes: 10

usernolongerregistered
usernolongerregistered

Reputation: 390

My suggestion would be to make the area you don't want to be searchable an image or have it use something like flash. The only solution I was able to find was this. But using that is completely up to you.

Upvotes: 0

Related Questions