14

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

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

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

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

4

3 回答 3

9

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";
}

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

于 2013-10-18T20:02:36.467 回答
3

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

.css-text [data-content]:before {
    content: attr(data-content);
}
<div class="css-text">
    Hello, <span data-content="World"></span>!
</div>

参照。https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access

于 2015-09-04T12:58:25.480 回答
0

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

于 2013-10-18T20:01:59.447 回答