码迷,mamicode.com
首页 > Web开发 > 详细

css禁止选中文本_兼容实现禁用选择功能

时间:2020-07-18 00:30:12      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:w3c   highlight   cti   代码   元素   www   int   https   htm   

有时候,我们需要使页面内容不可选择。首先想到的是一个css属性:user-select。user-select有两个值:

none:用户不能选择文本 
text:用户可以选择文本  

 

禁用选择代码实现

html:

<p>你可以选择我。</p>
<p class="noselect">你不能选择我!</p>

  

css:

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}

新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html

需要注意的是:

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

2、在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性unselectable="on",否则可能不会生效哦。

 

除了css外,我们同样可以使用js来实现:

document.body.onselectstart = document.body.ondrag =function(){
    return false;
}

  

 

 

css禁止选中文本_兼容实现禁用选择功能

标签:w3c   highlight   cti   代码   元素   www   int   https   htm   

原文地址:https://www.cnblogs.com/ypppt/p/13334062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!