Question

我有一个网页应用程序具有相当复杂的用户界面，并且部分屏幕是为内容保留的。

如果可能的话，我想这样做，当用户使用浏览器的内置文本搜索（CTRL + F）时，UI中的任何文本都会被忽略，只搜索实际内容。

这可行吗？ CSS和JavaScript是可以接受的

（我知道我可能会将文字呈现给<canvas>，但不值得努力）

Answer 1

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

例如：

如果您的用户界面中有一个按钮，例如<button id="dosomething"></button>，您可以使用以下CSS在其中添加一些不可搜索的文本：

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

我创建了一个小提琴来演示其工作原理：http://jsfiddle.net/3xENz/请注意，它甚至适用于<a>标记。

我建议您坚持使用:before选择器，因为它适用于IE8，而:after选择器则不然。

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

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

使用以下CSS：

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

由于屏幕阅读器可能无法正确处理这些样式，因此您仍然会遇到与图像相同的可访问性问题，但维护起来会更容易，并且设计响应更快。

Answer 2

扩展可空性answer：您还可以将文本存储在数据属性中：

＆＃13;

.css-text [data-content]:before {
    content: attr(data-content);
}

＆＃13;

<div class="css-text">
    Hello, <span data-content="World"></span>!
</div>

＆＃13;

Answer 3

我的建议是让你不想搜索的区域是图像，或者让它像闪光灯一样使用。我能找到的唯一解决方案是this。但使用它完全取决于你。