HTML:你可以隐藏/忽略浏览器中的文本元素查找(CTRL + F)

Question

我有一个具有相当复杂UI的Web应用程序,并且屏幕的一部分保留用于内容.

如果可能的话,我想这样做,以便当用户使用浏览器的内置文本搜索(CTRL + F)时,UI中的任何文本都将被忽略,并且只搜索实际内容.

这可行吗？CSS和JavaScript都可以接受

(我意识到我可能会将文本呈现为a <canvas>但不值得努力)

Answer 1

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";
}

由于屏幕阅读器可能无法正确处理这些样式,因此您仍然会遇到与图像相同的可访问性问题,但它更容易维护并且还允许更灵敏的设计.