CSS禁止选择文本功能(兼容IE,火狐等浏览器)


转载自: CSS禁止选择文本功能(兼容IE,火狐等浏览器)

有时候,我们为了用户体验,需要禁用选择文本功能。
这需要用到一个CSS属性:user-select,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的方法来禁用浏览器的文本选择功能了

有时候,我们为了用户体验,需要禁用选择文本功能。
这需要用到一个CSS属性:user-select,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的方法来禁用浏览器的文本选择功能了


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM