CSS user-select文本是否可複製

1. 概述

1.1 說明

在項目過程當中，有時候須要網頁中內容信息不可被複制進行保護數據信息，故可以使用css屬性user-select進行控制用戶可否選中文本。

1.2 語法

user-select : none | text | all | contain | auto

• • none：文本不能被選擇，即不可選中複製
  • text：能夠選擇文本，便可以選中複製文本信息
  • all：當全部內容做爲一個總體時能夠被選擇。若是雙擊或者在上下文上點擊子元素，那麼被選擇的部分將是以該子元素向上回溯的最高祖先元素。
  • contain(element)：能夠選擇文本，但選擇範圍受元素邊界的約束，僅在IE中受支持
  • auto：
    • 在::before和::after僞元素上，計算值是none
    • 若是元素是可編輯元素，則計算值是contain
    • 不然，若是此元素的父元素的user-select的計算值爲all，計算值則爲all
    • 不然，若是此元素的父元素的user-select的計算值爲none，計算值則爲none
    • 不然，計算值則爲text

默認值：text

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

1.3 user-select 使用

• user-select屬性的語法：
  • user-select: none;
  • user-select: auto;
  • user-select: text;
  • user-select: contain;
  • user-select: all;
• 火狐瀏覽器
  • -moz-user-select: none;
  • -moz-user-select: text;
  • -moz-user-select: all;
• 谷歌瀏覽器
  • -webkit-user-select: none;
  • -webkit-user-select: text;
  • -webkit-user-select: all;
• IE瀏覽器
• -ms-user-select: none;
• -ms-user-select: text;
• -ms-user-select: all;
• -ms-user-select: element;

　　說明：

　　　　1.IE6-9不支持該屬性，但支持標籤屬性  onselectstart="return false;"[IE/Safari/Chrome] 來達到 user-select:none的效果

　　　　2.Opera 12.5以前也不支持該屬性，支持私有的標籤屬性 unselectable="on" 來達到user-select:none的效果，on對應的是off

　　　　

 2. 代碼

2.1 代碼示例

　　通常使用以下：

 -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;