Prevent the user from selecting and copying text from your page
Ever wanted to stop the user from selecting and copying text from your website? This is often also a great hack to improve your mobile UX. Here are two ways you can do so:
Disable for the whole page
Add an HTML element to your page and add the following code:
<style>
body {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
</style>
Disable for a specific element
Add an HTML element to your page and add the following code:
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
</style>
Then do the following:
- Install the Classify Bubble Plugin
- Check “Expose the option to add an ID attribute to HTML elements” in settings/general.
- On the elements for which you want to apply the noselect class, add the following code in the ID attribute field:
{addClass: "noselect"}
See example implementation here.
⚠️ However, please be aware that it is still possible to extract your text from the page’s HTML code, eg. using Chrome’s Dev Tools.
That’s it. Keep it simple!
Damian