HTML：你可以隐藏/忽略来自浏览器的文本元素Find（CTRL + F） [英] HTML: Can you hide/ignore text elements from browser Find (CTRL+F)

问题描述

我有一个相当复杂的用户界面的网络应用程序，并为屏幕保留了一部分内容。

如果可能的话，我想让它因此，当用户使用浏览器的内置文本搜索（CTRL + F）时，用户界面中的任何文本都会被忽略，并且只搜索实际内容。

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

（我意识到我可以将文本呈现为< canvas> 但它这是不值得的努力）

解决方案

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

例如：

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

  #dosomething：before {
 content：Click Me; 
} 
  

我已经创建了一个小提琴来演示它如何工作： http://jsfiddle.net/3xENz/ 请注意，它甚至适用于< a> tags。

我建议您坚持使用：before 选择器，因为它可以在IE8中使用，而选择器之后的：没有。



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



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

以下CSS：



  #complexcontrol .text：before {
 content：Click Me; 
 
 
 
 $ b $ p 
 $ b 
由于屏幕阅读器可能不会正确处理这些样式，因此您仍然可以与图像相同的可访问性问题，但维护起来要容易得多，而且设计也更加灵活。
 
I've got a web app with a fairly complicated UI, and a portion of the screen reserved for content.

If possible, I would like to make it so that when the user uses the browser's built-in text searching (CTRL+F), any text in the UI is ignored and only the actual content is searched.

Is this doable? CSS and JavaScript are acceptable

(I realize I could probably render the text to a <canvas> but it isn't worth the effort there)
解决方案
You could inject your UI text using the CSS content property. Generated text like this is not searchable since it is part of the document style rather than the content.

For example:

If you have a button in your UI such as <button id="dosomething"></button> you could add some non-searchable text inside it using the following CSS:
#dosomething:before {
    content: "Click Me";
}
I've created a fiddle to demonstrate how this works: http://jsfiddle.net/3xENz/ Note that it even works with <a> tags.

I recommend you stick with the :before selector because it works in IE8, while the :after selector does not. 

If you have a more complex UI element, you can also add another element inside of it to hold the text content. For example:
<div id="complexcontrol"><div class="text"></div></div>
with the following CSS:
#complexcontrol .text:before {
    content: "Click Me";
}
Since screen readers probably won't process these styles properly you will still have the same accessibility problems as you would have with images, but it would be much easier to maintain and also allows a more responsive design.

                        
这篇关于HTML：你可以隐藏/忽略来自浏览器的文本元素Find（CTRL + F）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！