Code example to disable selected text through CSS rules

Prohibiting selected text is still necessary in some scenarios, such as if you don’t want others to copy your articles. At this time we can solve this problem by using CSS+JS. In addition, it should be pointed out here that user-select is not yet an official W3C standard, and each browser provides support in the form of private attributes.

Syntax

Formal syntax: none | text | all | element

The code is as follows:

(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;

The code is as follows:

.row-of-icons {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
 
 /* No support for these yet,use at own risk */
-o-user-select: none;
user-select: none;
}

IE Compatibility

Currently, the -ms-user-select rule can be used in browsers of IE 10 and above, but in earlier versions of IE, we can only prohibit selected text through javascript:

The code is as follows:

$(el).attr('unselectable','on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none', /* you could also put this in a class */
'-webkit-user-select':'none',/* and add the CSS class here instead */
'-ms-user-select':'none',
'user-select':'none'
}).bind('selectstart', function(){
return false;
});

The above is the detailed content of Code example to disable selected text through CSS rules. For more information, please follow other related articles on the PHP Chinese website!