Today I came across a website which had disabled copy and highlighting of the text, even when I turned off JavaScript in the browser. Curious, I researched how this stop content copying was accomplished.
I found that there’s both multiple CSS extensions and a CSS directive which disables a user selecting text on an element. Further, you can disable the right-click menu with an attribute.
Here’s how to disable copy and paste on websites.
First, adding the attribute & value oncontextmenu=”return false” to a page element will disable the right-click menu.
<body oncontextmenu="return false">
The CSS directive user-select: none; will disable highlighting and copying. The directive is well supported in modern browsers, apart from Safari on iOS and desktop.
This example CSS class includes all prefixes (only the two initial prefixes are needed currently) that can be applied:
.nocopy {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Example usage:
<body class="nocopy">
Prefixes listed against browser usage:
| iOS Safari | -webkit-touch-callout: none; |
| Chrome/Safari/Opera | -webkit-user-select: none; |
| Konqueror | -khtml-user-select: none; |
| Firefox | -moz-user-select: none; |
| Internet Explorer/Edge | -ms-user-select: none; |
I would definitely avoid this on a production website, as it’s incredibly user un-friendly and looks a bit dodgy. After all, your visitors arrive to read / learn from your content. Often that involves taking notes / clippings for use elsewhere.
It’s an interesting option however.