Disable Text Selection

Disable Text Selection

Making text unselectable is the best way to prevent text from being copied from a live page using the right-click context menu shortcut keys or drag & drop. This can be implemented using only CSS, by applying the following CSS definitions to the element that you want text selection disabled:

-webkit-user-select: -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none;

Example, if you want to disable text selection in Blogger posts, then the code is:

.post {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none;}

This CSS will disable text selection on the element and all it's children. It should work on Firefox, Safari, Chrome and IE10+. For IE9 and below, use onselectstart='return false' event handler, see II).



Re-enable text selection

What if you want to allow copying in some parts of your post. Say you post some codes (like I do) for readers to copy, then it doesn’t make sense if they can't select to copy it right? Fortunately you can restore text selection, by applying the same CSS definition to the element and replacing the value “none” with “text”. Let’s say your code is wrapped inside a <code> tag, then the code you need is:

.post code {-webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}

Posted in: Disable Copy Paste, Disable Text Selection, Others

RELATED ARTICLES