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.
(Guys Plz Suggest a better title) Thanks For Reading.
If it's helpful. Then Like, Share and React. 😁😎