# 页面文字禁止被选中复制
css实现禁止文本被选中，禁止复制的方法，其实很简单，我们可以使用 user-select属性来完成。
user-select属性是css3新增的一个属性，它可以用来控制内容的可选择性，设置或检索是否允许用户选中文本，适用于除替换元素外的所有元素。
# user-select基本语法：
user-select: auto|none|text|all;
1
属性值
| 值 | 描述 |
|---|---|
| auto | 默认。如果浏览器允许，则可以选择文本。 |
| none | 防止文本选取。 |
| text | 文本可被用户选取。 |
| all | 单击选取文本，而不是双击。 |
# css兼容写法
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# js控制选中文本
- 修改选中文本
document.addEventListener("copy",function(evt){
var clipboard_data = evt.clipboardData || window.clipboardData;
if(!clipboard_data){return;}
var text = window.getSelection().toString();
if(text){
evt.preventDefault();
clipboard_data.setData("text/plain",text+"\n\n🤔🤔");
}
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- 控制是否可复制文本
document.onselectstart=function(){
//return true;允许选中
//return false;禁止选中
}
1
2
3
4
2
3
4