css如何實現禁止文字被選中，禁止複製？ （程式碼範例）

在前端開發中，有時會出現這樣一種情況：雙擊文字後，文字就會被選中，特別醜，一點也不美觀，也很不方便；而且有時在某些網頁模組上我們就是就是需要文字不可以被選取或複製。

那麼如何實現這種需求，實作文字不被選取或複製？本篇文章就跟大家介紹css實作禁止文字被選中，禁止複製的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

css實作禁止文字被選中，禁止複製的方法，其實很簡單，我們可以使用 user-select屬性來完成。 下面我們來了解這個屬性。

user-select屬性是css3新增的屬性，它可以用來控制內容的可選擇性，設定或檢索是否允許使用者選取文本，適用於除替換元素外的所有元素。

基本語法：

user-select:value;

可以設定以下的屬性值：

auto：預設值，文本將根據瀏覽器的預設屬性進行選擇；

none：可以設定使用者不能選擇元素中的任何內容；

text：設定使用者可以選擇元素中的文字；

element：設定文字可選，但選擇範圍受元素邊界的約束（該屬性值只被IE和FF支援）

all：當所有內容作為一個整體時可以被選擇。如果雙擊或在上下文上點擊發生在子元素上，則該子元素向上回溯的最高祖先元素將被選取。簡單來說就是：目標元素將被整體選中，不能只選中一部分，瀏覽器會自動選取整個元素裡的內容。

-moz-none：firefox私有的屬性值，設定元素和子元素的文字將不可選；但是，子元素可以透過text重新設定為可選。

瀏覽器支援情況

上圖列出的是當user-select屬性的值為none|text|all的情況下各瀏覽器的支持程度；屬性值為element時，大部分瀏覽器都不支持，故不列出了。 

下面我們透過簡單的程式碼範例來介紹css user-select屬性實作禁止文字被選中，禁止複製的方法，考慮相容性。

禁止文字被選取複製程式碼範例：

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>

說明：

因為IE6-9不支援user-select屬性，想要實作user-select:none，即：禁止文字被選中，禁止複製的效果，可以使用標籤屬性 onselectstart="return false;" 來實作；同時Safari和Chrome也支援該標籤屬性。

總結：以上就是這篇文章所介紹的css實作禁止文字被選中，禁止複製的全部內容，大家可以自己動手試試，加深對user-select屬性的理解。希望能對大家的學習有所幫助，更多相關教學請造訪： CSS影片教學， HTML影片教學，bootstrap影片教學！

以上是css如何實現禁止文字被選中，禁止複製？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！