CODEWITHSUNDEEP
javascripthtmlcss
WHITECOLOR
WHITECOLOR

Reputation: 26142

Make HTML content not react on search (Ctrl+F)

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

When I do a search on a page (ctrl+F) and type some text that is contained in the layer mentioned above the text is highlighted.

Is it possible to make content not react on search at all?

Or I would remove search function from the page where my app opens if I could.

Upvotes: 2

Views: 3128

Answers (7)

daniel__
daniel__

Reputation: 11845

Disable-CTRL-F-jQuery-plugin

How to use:

Include 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 the disableFind() function on the element(s) you want to make unsearchable.

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

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

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

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

It's tricky but you could write the text of your layer as the CSS content property of a layer pseudoelement. In this way the search functionality is not able to detect the text, and the text itself can't be highlighted.

e.g.

Html

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

Css

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

Also the image solution is fine but this would require an extra request and the text couldn't be zoomable everywhere using default browser functionality. Other solution requiring Flash (or also Silverlight or Java Applets) should be avoided, especially due to the lackness of the player plugin for some platforms.

Example fiddle (with CSS attr()) : http://jsfiddle.net/EbTNd/

Upvotes: 9

polybios
polybios

Reputation: 1159

Try to render the text with 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 probing it seems that to prevent search you have to put the SVG in separate file:

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

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46559

If all you want is for the highlighted text to be the same color as the surrounding text, you can change the highlight color in many browsers. Assuming the normal text is black on white,

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

will hide the highlight, while keeping the normal select-functionality.

See also Changing the text selection color using CSS?

Upvotes: 1

user2613424
user2613424

Reputation: 21

One work-around is to use the CSS content declaration to inject the text on your page. See answer for similar question here

Upvotes: 1

OzrenTkalcecKrznaric
OzrenTkalcecKrznaric

Reputation: 5646

You can prevent searching in your page. It is somewhat limited but you can check if it fits.

window.onkeydown = function(e){
  if(e.ctrlKey && e.keyCode == 'F'.charCodeAt(0)){
    e.preventDefault();
    // Comment out this last one...
    alert('Ctrl+F');
  }
}

See fiddle: http://jsfiddle.net/ozrentk/g4wrd/

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

The only option not to reveal on search is to make that an image or an external media like Flash. It is a generic browser feature (Ctrl + F) which displays that text, if it exists on the screen will be highlighted.

Upvotes: 2

Related Questions