css3中user-select的用法詳解

css3中user-select的用法詳解

user-select屬性是css3新增的屬性，用於設定使用者是否能夠選取文字。可用於除替換元素以外的所有元素，以下是user-select的主要用法和注意事項的說明，更多資訊可參考如下css3文件說明。

(1) 語法

user-select:none | text | all |element

預設值：text

) 取值說明

none:

文本不能被選擇

text:

可以選擇文字

all：

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

Element:

可以選擇文本，但選擇範圍受元素邊界的約束

(3) 瀏覽器支持情況

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

(4) 說明

1.

IE6-9

不支援此屬性，但支援使用標籤屬性 onselectstart="return false;", ;Safari和Chrome也支援該標籤屬性；2.直到Opera12.5仍然不支援該屬性，但和

IE6-9

一樣，也支援使用私有的標籤屬性on" 來達到 user-select:none的效果；unselectable 的另一個值是off；3.除過它Chrome和

3.除過它器中，如果將文字設定為 

-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程式碼：

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

                                               

css3中user-select的用法詳解

user-select屬性是css3新增的屬性，用於設定使用者是否能夠選取文字。可用於除替換元素以外的所有元素，以下是user-select的主要用法和注意事項的說明，更多資訊可參考如下css3文件說明。

參考連結：http://www.php.cn/

(1) 語法

user-select:

none | text | all | element

範圍：

除替換元素外的所有元素

(2) 取值說明

none:

文字不能被選擇

text:

可以選擇文字

文字不能被選擇

text:

可以選擇文字整體時可以被選擇。如果雙擊或在         上下文上點擊子元素，那麼被選取的部分將是以該子元素       向上回溯的最高祖先元素。

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

(3) 瀏覽器支持情況

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

(4) 說明

1.

IE6-9

不支援此屬性，但支援使用標籤屬性的效果；

Safari

和

Chrome也支援該標籤屬性；

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

3.除

Chrome和Safari外，在其它瀏覽器中，如果將文字設為​​ -ms-user-select-ms-user-select-ms-user-select-ms-user :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程式碼：

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

更多css3中user-select的用法詳解 相關文章請關注PHP中文網！