css禁用页面内容选中与复制多种操作方法

发布时间:2020-10-27编辑:脚本学堂
有关css禁止鼠标拖动选择文字,禁用页面内容选中与复制操作的方法,感兴趣的朋友可以参考下。

通过css禁用页面内容选中和复制操作,在body的样式中,添加代码:
 

-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;

css实现网页禁止复制功能,不能用鼠标圈选文字,不能复制。
比js禁止复制功能的优势在于,不管客户端在启不启用javascript的情况一下都生效,而且效果很好。

代码:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>css禁止选择和复制_www.jb200.com</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style>
body{
 -moz-user-select:none;
 hutia:expression(this.onselectstart=function(){return(false)});
}
</style>
</head>
<body>
这里是网页内容,试试您能不能复制?
</body>
</html>

css禁止文字选择用到的属性:
 

user-select有两个值:
none:用户不能选择文本
text:用户可以选择文本

注意,user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整。

代码:
 

body{
   -moz-user-select: none; /*火狐*/
   -webkit-user-select: none;  /*webkit浏览器*/
   -ms-user-select: none;   /*IE10*/
   -khtml-user-select: none; /*早期浏览器*/
   user-select: none;
}
//IE6-9还没发现相关的CSS属性
//IE6-9
document.body.onselectstart = document.body.ondrag = function(){
    return false;
}