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;