css3的user-select屬性設置文本內容能否被選擇

CSS3中提供了個user-select屬性來設置或檢索是否允許用戶選中文本。

語法

user-select：none | text | all | element。

默認值：text。

適用性：除替換元素外的所有元素。

繼承性：無。

動畫性：否。

計算值：指定值。

取值

none：文本不能被選擇。

text：可以選擇文本（默認值）。

all：當所有內容作為一個整體時可以被選擇。如果雙擊或者在上下文上點擊子元素，那么被選擇的部分將是以該子元素向上回溯的最高祖先元素。

element：可以選擇文本，但選擇范圍受元素邊界的約束。

說明、兼容性與注意事項

該屬性用於設置或檢索是否允許用戶選中文本。

1.IE6~9不支持該屬性，但支持使用標簽屬性【onselectstart="return false;"】來達到【user-select: none;】的效果。

2.Safari和Chrome也支持該標簽屬性。

3.Opera直到12.5仍然不支持該屬性，但和IE6~9一樣，也支持使用私有的標簽屬性【unselectable="on"】來達到【user-select: none;】 的效果。

4.unselectable的另一個值是off（默認值）。

5.除Chrome和Safari外，在其它瀏覽器中，如果將文本設置為【-ms-user-select: none;】，則用戶將無法在該文本塊中開始選擇文本。不過，如果用戶在頁面的其他區域開始選擇文本，則用戶仍然可以繼續選擇將文本設置為【-ms-user-select: none;】的區域文本，即文本的選擇是具有連續性的，這個屬性在除了Chrome和Safari外的其他瀏覽器上也不具備即時打斷文本連續選擇的特性。

6.這個屬性對應的腳本特性為userSelect。

簡單示例

<style>
.testUserSelect{
　　padding: 10px;
　　-webkit-user-select: none;
　　-moz-user-select: none;
　　-o-user-select: none;
　　user-select: none;
　　background-color: #eeeeee;
}
</style>

<div class="testUserSelect" onselectstart="return false;" unselectable="on">選我試試，選到我就讓你嘿嘿嘿。</div>

選我試試，選到我就讓你嘿嘿嘿。

 

"世界那么大，可我還是遇見了你。世界那么小，可我還是弄丟了你。"