javascript - HTML:你能隐藏/忽略浏览器中的文本元素吗 Find (CTRL+F)

Question

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

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

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

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

Answer 1

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

例如:

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

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

我创建了一个 fiddle 来演示它是如何工作的:http://jsfiddle.net/3xENz/请注意，它甚至适用于 <a>标签。

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

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

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

使用以下 CSS:

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

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