Is it possible to disable Ctrl + F of find in page?

Question

I have a puzzle site and its an awful way of cheating. Its okay if only partially, but can it be done?
Something I had in mind was replacing the letters with images, but anything easier than that?

Answer 1

Code

window.addEventListener("keydown",function (e) {
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) { 
        e.preventDefault();
    }
})

Answer 2

Rather than disable the Find function, you could make it so that Find won't find the words! One way to do this would be to use the CSS content declaration to inject the words. Find won't find them:

<div class="word-foobar"></div>

.word-foobar:before {
    content: "Foobar";
}

You could quite easily write some Javascript to automatically generate all the necessary CSS rules for you, too.

Answer 3

You can disable the keyboard shortcut in most browsers (IE9, Firefox, Chrome, Opera), but you can't stop someone using Find by clicking it in the browser.

Here's some jQuery-powered JavaScript that does it:

$(window).keydown(function(e){
    if ((e.ctrlKey || e.metaKey) && e.keyCode === 70) {
        e.preventDefault();
    }
});

Taken from http://caniuse.com/, where this feature regularly irritates me. On that site, it's used to make CTRL+F do a custom search on the page, instead of disabling it completely.

Answer 4

I don't think there's a way to disable the feature altogether and there should not be a way to disable it.

However you can ensure that some text will not be found by Ctrl+F by writing it in away that the browser doesn't consider continous text.

Using images is one approach that's relatively simply.

Alternatively you can randomize the letters and re-arrange them with some CSS magic (my CSS-fu is too weak to give an example, unfortunately). For example if you want to "hide" the word "hello", then write out "lehol" with each letter in a separate <div> and apply some CSS styles so that visually the letters will be in the correct order.

Note that this (and probably all other working solutions as well) will also break copy-and-paste of the text.

Answer 5

Here's a jQuery plugin that does what you're looking for.

Answer 6

I would presume that using keydown would enable this, however as a matter of principle, changing the way that a browser behaves is a bad idea. Although it is more of a pain for you to do, there are font replacement techniques that should make it easier.

If you do find a means of doing this, there is always a danger that someone will get around it. It is far better to write the page to work whatever than hack the browser.

Answer 7

you can do it with javascript - this is only pseudocode (written in jQuery) as I'm not certain how to listen for both a ctrl AND an f, but you get the idea:

$(body).keypress(function(e)
{
    if (e.keyCode===17)
    {
        //ctrl has been pressed, listen for subsequent F press (keyCode 70)
        //if next keyCode===70
        return false;
    }
});

Returning false like this will stop the browser doing anything when the keys are pressed, as far as I know. you could also use e.preventDefault(); to try to prevent anything happening if return false; isn't enough.

Hope this helps

Answer 8

Why not use the Shadow DOM ? This will allow your content to be inaccessible by search engines or screen readers. And has the added bonus of having the exact same behavior for the user.

Take a look here for more info: Introduction to Shadow DOM

Answer 9

No. Replacing with images is the fastest and the safest way. (Unless you are willing to switch to Flash/Java Applet/etc.)

Answer 10

Render your website inside a <canvas> instead of using HTML.