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;