HTML：你能隐藏/忽略浏览器中的文本元素查找（CTRL + F）

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

我有一个具有相当复杂的用户界面的Web应用程序,以及为内容保留的部分屏幕。

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.

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

Is this doable? CSS and JavaScript are acceptable

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

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

(我意识到我可能会将文本渲染到

3 个解决方案

#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.

您可以使用CSS content属性注入UI文本。像这样生成的文本是不可搜索的,因为它是文档样式的一部分而不是内容。

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:

如果您的UI中有一个按钮,例如

#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.

我已经创建了一个小提琴来演示它是如何工作的:http://jsfiddle.net/3xENz/请注意,它甚至适用于标签。

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

我建议你坚持使用:before选择器,因为它适用于IE8,而:after选择器不支持。

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

如果您有一个更复杂的UI元素,您还可以在其中添加另一个元素来保存文本内容。例如:

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

with the following CSS:

使用以下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.

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

#2

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

#3

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.

我的建议是让您不希望搜索的区域成为图像,或者让它像闪光灯一样使用。我能找到的唯一解决方案是这个。但使用它完全取决于你。

#1