CSS:禁止选中文本

CSS特性:user-select: none;

实现效果:禁止选中指定的文本

Sample code:


this is a pargraph/p>

//CSS部分
.no-selected {
-webkit-user-select: none; /*Chrome/ Safari/ Opear新版本*/
-moz-user-select: none; /*Foxfire */
-ms-user-select: none; /*Internet Explorer/ Edge*/
-o-user-select: none; /*Opear老版本*/
-khtml-user-select: none; /* Konqueror */
-webkit-touch-callout: none; /* iOS Safari */
user-select: none;  
/* Nonprefixed version, currently not supported by any browser */
}

note: 在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性unselectable="on",否则可能不会生效.

MDN:user-select特性是非标准的。请谨慎使用

//Formal syntax: none | text | all | element
(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;

none:元素内的文字及其子元素将不会被选中. Selection can contain these elements. Starting with Firefox 21 none behaves like -moz-none, so selection can be re-enabled on sub-elements using -moz-user-select:text.

text:用户可以选中文字.-moz-noneThe text of the element and sub-elements will appear as if they cannot be selected. Selection can contain these elements. Selection can be re-enabled on sub-elements using -moz-user-select: text. Starting with Firefox 21 none behaves like -moz-none.

all:在一个HTML编辑器中,当双击子元素或者上下文时,那么包含该子元素的最顶层元素也会被选中。

element:火狐和IE中有效. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

Note:user-select is not currently part of any W3C CSS specification(user-select不是现行W3C CSS规范的一部分). As such, there are minor differences between the browser implementations. Be sure to test your application across browsers.

你可能感兴趣的:(CSS:禁止选中文本)