前端学习之css禁止文字被选中

    有时候,为了让用户有更好的体验,需要禁用掉文本选中功能

    比如:使用a标签模拟按钮,如果不禁用掉文本选中功能,那么双击时会选中文字,用起来很不爽。

    多数情况下,只需要使用CSS样式就可以实现这个功能啦:

    body{
      -o-user-select: none;
      -moz-user-select: none; /火狐 firefox/
      -webkit-user-select: none; /webkit浏览器/
      -ms-user-select: none; /IE10+/
      -khtml-user-select :none; /早期的浏览器/
      user-select: none; 
    }

    user-select有四个值:

      none:文本不能被选择

      text:可以选择文本

      all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

      element:可以选择文本,但选择范围受元素边界的约束。

    值得注意的是:IE6-9目前需要通过JavaScript来实现。

    document.body.onselectstart = document.body.ondrag = function(){
       return false;
     }
分享本文至:


发布时间:2017-11-15 16:45 Wednesday
  • 版权声明:除非注明,文章均为【石家庄SEO】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:石家庄SEO

    东轩,IT专业,主攻网站前端设计制作方面以及seo技术。博主现在单身哦。有单身的小姐姐可以私信博主。

    返回列表
    上一篇:
    下一篇:

    发表评论

    快捷回复:

    评论列表 (已有2条评论)
    威客系统屌丝2017-11-16 17:12回复
    打卡签到我来啦
    东轩oba神秘管理员2017-11-17 11:41回复
    回复了威客系统:感谢感谢