您的位置:首页 > Web前端 > CSS

CSS禁止文字选择user-select应用

2016-01-21 13:54 483 查看
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; 


注意:

-webkit-user-select: none; -khtml-user-select: none; 都会引起windows上的Safari <input />不能获取焦点

可以使用屏蔽 mousedown 事件解决,chrome也可以使用此方法

总结:

屏蔽用户选中某个节点文本用以下两个方法就可以了

屏蔽 mousedown 事件可以解决除IE6-9以外的所有浏览器选中问题

onselectstart ="return false;" //解决E6-9选中问题
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: