在我的网络应用程序中,我有一个包含显示文本的静态 HTML 内容的图层。
当我在页面上进行搜索 (ctrl+F) 并键入一些包含在上述图层中的文本时,文本会突出显示。
是否有可能使内容根本不对搜索做出反应?
或者,如果可以的话,我会从我的应用打开的页面中删除搜索功能。
在我的网络应用程序中,我有一个包含显示文本的静态 HTML 内容的图层。
当我在页面上进行搜索 (ctrl+F) 并键入一些包含在上述图层中的文本时,文本会突出显示。
是否有可能使内容根本不对搜索做出反应?
或者,如果可以的话,我会从我的应用打开的页面中删除搜索功能。
这很棘手,但您可以将图层的文本编写为content
图层伪元素的 CSS 属性。通过这种方式,搜索功能无法检测到文本,并且无法突出显示文本本身。
例如
html
<div id="layer" data-text="this text won't be found"></div>
CSS
#layer:before {
content: attr(data-text);
}
图像解决方案也很好,但这需要额外的请求,并且使用默认浏览器功能无法在任何地方缩放文本。应避免使用其他需要 Flash(或 Silverlight 或 Java Applets)的解决方案,尤其是由于某些平台缺少播放器插件。
小提琴示例(使用 CSS attr()
):http: //jsfiddle.net/EbTNd/
在搜索中不显示的唯一选择是制作图像或 Flash 等外部媒体。这是一个通用的浏览器功能 (Ctrl + F),它显示该文本,如果它存在于屏幕上,将被突出显示。
您可以阻止在您的页面中进行搜索。它有些有限,但您可以检查它是否合适。
window.onkeydown = function(e){
if(e.ctrlKey && e.keyCode == 'F'.charCodeAt(0)){
e.preventDefault();
// Comment out this last one...
alert('Ctrl+F');
}
}
见小提琴:http: //jsfiddle.net/ozrentk/g4wrd/
一种解决方法是使用 CSS 内容声明在页面上注入文本。 在此处查看类似问题的答案
如果您只想使突出显示的文本与周围文本的颜色相同,则可以在许多浏览器中更改突出显示颜色。假设普通文本是白底黑字,
::-moz-selection {
background: white;
color: black;
}
::-webkit-selection {
background: white;
color: black;
}
::selection {
background: white;
color: black;
}
将隐藏突出显示,同时保持正常的选择功能。
另请参阅使用 CSS 更改文本选择颜色?
尝试使用 SVG 渲染文本:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
http://www.w3schools.com/svg/svg_text.asp
编辑:在进一步探索之后,似乎为了防止搜索,您必须将 SVG 放在单独的文件中:
<object height="30" width="500" data="text1.svg" type="image/svg+xml">
<embed src="text1.svg" type="image/svg+xml">
</object>
如何使用:
包括 jQuery 和 disableFind.js。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="disableFind.js"></script>
disableFind()
在要使其不可搜索的元素上调用该函数。
$('p').disableFind(); // make all paragraphs unsearchable
$('.unsearchable').disableFind(); // make all elements with "unsearchable" class unsearchable
$(body).disableFind(); // make all text on page unsearchable