css实现禁止文本被选中,无法复制,文字不被选中

css实现禁止文本被选中,无法复制,文字不被选中

一般情况在css中直接加一句:

   user-select:none;

user-select属性是css3新增的一个属性,它可以用来控制内容的可选择性,设置或检索是否允许用户选中文本,适用于除替换元素外的所有元素。

user-select 可设置的属性:

auto:默认值,文本将根据浏览器的默认属性进行选择;

none:可以设置用户不能选择元素中的任何内容 ;

text:设置用户可以选择元素中的文本 ;

element:设置文本可选,但选择范围受元素边界的约束(该属性值只被IE和FF支持)

all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击发生在子元素上,则该子元素向上回溯的最高祖先元素将被选中。简单来说就是:目标元素将被整体选中,不能只选中一部分,浏览器会自动选中整个元素里的内容。

-moz-none:firefox私有的属性值,设置元素和子元素的文本将不可选;但是,子元素可以通过text重新设置为可选。

还有以下写法:

-webkit-user-select:none;/*webkit浏览器*/ 
-moz-user-select:none;/*火狐*/ 
-ms-user-select:none;/*IE10*/ 
user-select:none;

说明

IE6-9还没发现相关的CSS属性,因此可以使用在中添加标签属性 onselectstart="return false;" 来实现文字不被选中的效果;同时Safari和Chrome也支持该标签属性。

//IE6-9 
<div class="box" onselectstart="return false;" unselectable="on">
       文字 
</div>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值