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

Question

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

如果可能的话，我想让它在用户使用浏览器的内置文本搜索 (CTRL+F) 时，忽略 UI 中的任何文本，只搜索实际内容。

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

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

score 9 · Accepted Answer

content您可以使用 CSS属性注入您的 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";
}

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

score 3 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

3 回答 3