css禁止选择文本与复制多种方法

发布时间:2020-11-08编辑:脚本学堂
有关css禁止文本选择功能的方法,禁止选择与复制,禁用选择文本功能,用到css属性:user-select,需要的朋友参考下。

禁用选择文本功能,用到css属性:user-select。

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属性,只能通过js实现:
 

//IE6-9
document.body.onselectstart = document.body.ondrag = function(){ 
    return false; 
}
 

结合css和js方法禁用浏览器的文本选择功能。

例2,用css禁止选择、复制和鼠标右键。

使用此方法防止文章和代码的复制,很多浏览器尚不支持frame,如果要支持FRAME可以去升级一下浏览器。
 

点此下载: http://xxx.xx.com/download/down_page/1081612800/1219.shtml
<img src='binghe@glacier' style='display:none'>
<style type="text/css">
body{glacier:expression_r(document.body.onselectstart=document.body.oncontextmenu=function(){return false;});}
</style>
 

 
关键参数:
expression--css与js的结合点
 
定义:

ie5及其以后版本支持在css中使用expression,把css属性和javascript表达式关联起来,这里css属性可以是元素固有的属性,也可以是自定义属性。
css属性后面可以是一段javascript表达式,css属性的值等于javascript表达式计算的结果。
在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。
这个表达式就好像是在这个元素的一个成员函数中一样。
 
使用方法:
1、通过外部调用样式表文件,由于新浪会自动将expression替换为expression_x,因此无法直接在空白面板中添加代码,只能通过外部调用达到首页禁止的目的。
2、样式表文件也可以在文章中调用,达到首页跟点击查看原文同时禁止的目的。
 
注意:一般不建议使用,因为expression对浏览器资源要求比较高。

例3,css禁止html标签被选中的方法

css样式表代码实现各浏览器的标签禁止选中功能。
 

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