html如何取消文字選中

在HTML中，可以使用user-select屬性取消文字選中，只需要給元素設定「user-select:none」程式碼即可。 user-select屬性用於設定使用者是否能夠選取文本，當值為none時，表示文字不能被選擇。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

(1) 語法

**user-select:**none | text | all | element

**預設值：**text

適用範圍：除替換元素外的所有元素

(2) 取值說明

none:文字不能被選擇

text:可以選擇文字

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

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

(3) 說明

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和*Safari外，在其它瀏覽器中，如果將文字設定為-ms-user-select:none;，使用者將無法在該文字區塊中開始選擇文字。不過，如果使用者在頁面的其他區域開始選擇文本，則使用者仍然可以繼續選擇將文本設定為-ms-user-select:none; *的區域文本；

4.對應的腳本特性為userSelect

(4) 範例

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>

效果：

################################################ #######推薦學習：###html影片教學######

以上是html如何取消文字選中的詳細內容。更多資訊請關注PHP中文網其他相關文章！