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

Question

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.

Do you really want to suppress the search functionality altogether? I mean, ordinarily the highlighted text also gets _selected_, so the user can copy it to the clipboard. Do you want to prevent that as well? — Mr Lister, Jul 31 '13 at 08:26
use Pseudoelements as suggested by Fabrizio Calderan, it's awesome. — Sunny Sharma, Jul 31 '13 at 08:38
Just a curiosity, Why you don't want ctrl + f find that text? Any specific reason or just an addition to your knowledge?? - @WHITECOLOR — Nitesh, Jul 31 '13 at 08:40

Fabrizio Calderan · Answer 1 · 2013-07-31T08:47:53.793

9

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/

edited Jul 31 '13 at 08:47

answered Jul 31 '13 at 08:27

Fabrizio Calderan

120,726
26
164
177

This feature is great. but for non supporting browsers, text itself will not be found. – Nitesh Jul 31 '13 at 08:29
1

Pseudoelements are supported everywhere, since `IE8` – Fabrizio Calderan Jul 31 '13 at 08:29
True. Since `IE8` they are supported. – Nitesh Jul 31 '13 at 08:33
1

Thanks, but my content is dynamically generated, it can not embed it into css, and I would not want to make a dynamic css styles either =) – WHITECOLOR Jul 31 '13 at 08:43
1

@WHITECOLOR this is not a problem at all: see this fiddle http://jsfiddle.net/EbTNd/ - Using `attr()` function the CSS is not dynamic and you could inject your text as attribute of some element – Fabrizio Calderan Jul 31 '13 at 08:45
1

Well, I will think about the possibility of using your solution. The content is quite big, it's not a sentence it's a book pages with some sophisticated css styles for proper rendering. – WHITECOLOR Jul 31 '13 at 08:51

score 2 · Accepted Answer · answered Jul 31 '13 at 08:24

2

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.

answered Jul 31 '13 at 08:24

Nitesh

15,425
4
48
60

And rightfully so. Every time a site tampers with my browser's UI I want to scream. – Winfield Trail Jul 31 '13 at 08:26
I assume the only working variant for me is to render a text on a canvas element. – WHITECOLOR Jul 31 '13 at 08:45
Yes. But browser support you have to look for, if you are using latest ones, that should not be an issue. I still suggest the traditional image or flash as they are pretty reliable in terms of their characteristics and don't let the other blocks get affected when they are incorporated. - @WHITECOLOR – Nitesh Jul 31 '13 at 08:48
1

Thanks, I will consider your suggestions. – WHITECOLOR Jul 31 '13 at 08:52

score 1 · Answer 3 · answered Jul 31 '13 at 08:25

1

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/

answered Jul 31 '13 at 08:25

OzrenTkalcecKrznaric

5,535
4
34
57

I't a dirty hack =) It won't handle all the situaltions (if the search bar already activated prior app's page load or when search is called from the menu). But thanks for suggestion -) – WHITECOLOR Jul 31 '13 at 08:34
1

@WHITECOLOR: yes it is :) however, it's used a lot – OzrenTkalcecKrznaric Jul 31 '13 at 08:57

score 1 · Answer 4 · edited May 23 '17 at 12:02

1

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

edited May 23 '17 at 12:02

Community

1
1

answered Jul 31 '13 at 08:30

user2613424

21
2

score 1 · Answer 5 · edited May 23 '17 at 10:31

1

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?

edited May 23 '17 at 10:31

Community

1
1

answered Jul 31 '13 at 08:33

Mr Lister

45,515
15
108
150

The problem is not only in highlighting the content changes its position either (I have a columned content). Thanks for the suggestion. – WHITECOLOR Jul 31 '13 at 08:41

polybios · Answer 6 · 2013-07-31T08:43:38.133

1

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>

edited Jul 31 '13 at 08:43

answered Jul 31 '13 at 08:35

polybios

1,159
8
20

1

Just a friendly warning: to avoid malignantly being downvoted into oblivion, remove that link. – Mr Lister Jul 31 '13 at 08:37
@MrLister - I am curious to know why people here don't like W3Schools? – Nitesh Jul 31 '13 at 08:38
@NathanLee Because people seem to think that http://www.w3fools.com/ should be taken as gospel. I'm not saying that W3Schools is such a good site to learn from, but there are many sites that are as bad, or worse. – Mr Lister Jul 31 '13 at 08:43

score 0 · Answer 7 · answered Jul 31 '13 at 08:53

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

so f.. dirty.))) and slows rendering considerably for a dynamic content. Thanks for the suggestion. — WHITECOLOR, Jul 31 '13 at 09:51

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

7 Answers7

Linked