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

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

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

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

（我意识到我可能可以将文本呈现给<canvas>但不值得在那里付出努力）

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

例如：

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

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

我创建了一个小提琴来演示它是如何工作的：http://jsfiddle.net/3xENz/ http://jsfiddle.net/3xENz/请注意，它甚至可以与<a> tags.

我建议你坚持使用:before选择器，因为它在 IE8 中工作，而:after选择器没有。

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

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

使用以下 CSS：

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

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