前端学习之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;
     }
本博客所有文章如无特别注明均为原创。作者:东轩oba复制或转载请以超链接形式注明转自 东轩博客一个自媒体的个人优秀博客园
原文地址《前端学习之css禁止文字被选中

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(2)

打卡签到我来啦
威客系统 4周前 (2017-11-16) 回复
@威客系统:感谢感谢
东轩oba 4周前 (2017-11-17) 回复