Preventing copying text in a webpage 😁

#webdev #html #css #javascript

This feature is really important if you have a very very unique content website or an online eBook. So here is the basic post and required post for all of you. In this post, we'll see how to prevent copying text in a webpage and I have got a bonus too.

Do you want development news right on your default chrome or firefox page? Then get the amazing daily.dev extension. There are only PROS of getting this extension no CONS.

Lez Go 👊

Simple and Basic ONE!

-> This is the simple tutorial for preventing copying of an element on the web-page. Ex. p, div, main.
So here is how we can do that.

<div id="test" onmousedown='return false;' onselectstart='return false;'>
<!-- So we're disabling the texts coming under div tag-->

Let's see an example-

See you can't select the text now. 👊

Using CSS

-> You can directly disable by using CSS by just applying these properties to the whole body, you can move them to a class and apply that class to the elements you want to disable select.

/* Prevent text selection of a <body> element in all major browsers */
h2 {
    -youbkit-touch-callout: none; /* iOS Safari */
        -youbkit-user-select: none;   
/* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none;       /* IE 10+ and Edge */
    user-select: none;      /* Non-prefixed version,
                  currently supported by Chrome and Opera */
}

Here is the example for that-

Disabling Right Click

-> So technically no chances of copying.

We will use JavaScript and jQuery

document.oncontextmenu = new Function("return false;");

///JavaScript

$(document).ready(function () {
    $("body").on("contextmenu",function(e){
        return false;
    });
});

// jQuery

The main motive is to capture the onContextMenu event, and return false in the event handler. So, this will block the access from mouse right click as well from the keyboard.

Do you want development news right on your default chrome or firefox page? Then get the amazing daily.dev extension. There are only PROS of getting this extension no CONS.

Thanks For Reading.

If it's helpful. Then Like, Share and React. 😁😎

Oldest comments (30)

∮ • Nov 6 '20

Well, I can copy using DevTools 😂
Nice article, though 👍

Rahul • Nov 6 '20

Cheater😁

AmgedAlmogahed • Nov 6 '20

Google lens can copy any text any where

Rahul • Nov 6 '20

Found the second cheater.

powerfuldruid • Nov 6 '20

Pretty sure that this also makes the content inaccessible

Rahul • Nov 6 '20

Yea it will maybe.

Pacharapol Withayasakpunt • Nov 6 '20 • Edited

Whatever you may try, one can always use Puppeteer, DevTools or View Page Source.

However, I would want to send signals to say, you are not intended to copy, unless you want to break the law. (And disable easy-copying, without breaking a11y, e.g. tab.)