CSS特性:user-select: none;
實現(xiàn)效果:禁止選中指定的文本
Sample code:
<!-- HTML部分 -->
<p class="no-selected">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:元素內(nèi)的文字及其子元素將不會被選中. 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不是現(xiàn)行W3C CSS規(guī)范的一部分). As such, there are minor differences between the browser implementations. Be sure to test your application across browsers.
叹括。