css3中user-select的用法詳解

css3中user-select的用法詳解

user-select屬性是css3新增的屬性，用於設置用戶是否可以選中文本。可用於除替換元素外的全部元素，如下是user-select的主要用法和注意事項的說明，更多信息可參考以下css3文檔說明。

參考連接：http://www.css88.com/book/css/properties/user-interface/user-select.htm

(1) 語法

user-select:none | text | all | element

默認值：text

適用範圍：除替換元素外的全部元素

(2) 取值說明

none:文本不能被選擇

text:能夠選擇文本

all：當全部內容做爲一個總體時能夠被選擇。若是雙擊或者在 上下文上點擊子元素，那麼被選擇的部分將是以該子元素 向上回溯的最高祖先元素。

Element:能夠選擇文本，但選擇範圍受元素邊界的約束

(3) 瀏覽器支持狀況

如下圖列出的是值爲none|text|all的狀況下各個瀏覽器的支持程度；值爲element時，大部分瀏覽器不支持，故不列出。

(4) 說明

1.IE6-9不支持該屬性，但支持使用標籤屬性 onselectstart="return false;"來達到 user-select:none 的效果；Safari和Chrome也支持該標籤屬性；

2.直到Opera12.5仍然不支持該屬性，但和IE6-9同樣，也支持使用私有的標籤屬性 unselectable="on" 來達到 user-select:none的效果；unselectable 的另外一個值是off；

3.除Chrome</font>和Safari</font>外，在其它瀏覽器中，若是將文本設置爲 -ms-user-select:none;，則用戶將沒法在該文本塊中開始選擇文本。不過，若是用戶在頁面的其餘區域開始選擇文本，則用戶仍然能夠繼續選擇將文本設置爲 -ms-user-select:none; 的區域文本；

4.對應的腳本特性爲userSelect

(5) 示例

css代碼：

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

html代碼：

<div class="box" onselectstart="return false;" unselectable="on">
    這是測試數據
</div>