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

Question

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

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

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

（我意识到我可能可以将文本渲染为

<canvas>

，但不值得在那里付出努力）

Answer 1

您可以使用 CSS

content

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

例如：

如果您的 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

扩展可空性的答案：您还可以将文本存储在数据属性中，如下所示：

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

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

Answer 3

我的建议是让您不想搜索的区域成为图像或使用 Flash 之类的东西。我能找到的唯一解决方案是this。但使用它完全取决于你。

Answer 4

使用惰性属性：

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

在较旧的 Chrome 版本中，inert 无法以这种方式工作。