Make HTML content not respond to search (Ctrl + F)

Question

In my web application, I have a layer with static HTML content that displays text.

When I search on the page (ctrl + F) and type the text contained in the above layer, the text is highlighted.

Is it possible that the content does not respond to the search at all?

Or I will remove the search function from the page where my application opens, if I could.

Answer 1

The only option that should not be detected when searching is to make an image or an external medium such as Flash. This is a common browser function (Ctrl + F), which displays this text, if it exists on the screen, will be highlighted.

Answer 2

, CSS content . , , .

.

HTML

<div id="layer" data-text="this text won't be found"></div>

Css

#layer:before {
   content: attr(data-text); 
}

---

, , , . , Flash ( Silverlight Java-), - .

( CSS attr()): http://jsfiddle.net/EbTNd/

Answer 3

. , , .

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/

Answer 4

CSS . .

Answer 5

, , , . , ,

::-moz-selection {
  background: white;
  color: black;
}
::-webkit-selection {
  background: white;
  color: black;
}​
::selection {
  background: white;
  color: black;
}

, .

. CSS?

Answer 6

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

Edit: After further research, it seems that to prevent the search, you need to put the SVG in a separate file:

<object height="30" width="500" data="text1.svg" type="image/svg+xml">
  <embed src="text1.svg" type="image/svg+xml">
</object>

Answer 7

Disable-CTRL-F-jQuery-plugin

How to use:

Enable jQuery and disableFind.js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="disableFind.js"></script>

Call a function disableFind()for the element (s) that you want to make unrecognizable.

$('p').disableFind();               // make all paragraphs unsearchable

$('.unsearchable').disableFind();   // make all elements with "unsearchable" class unsearchable

$(body).disableFind();              // make all text on page unsearchable