首页 > Web开发 > 详细

CSS3禁止用户选中文字——user-select: none;

时间:2019-04-04 17:34:58      阅读:184      评论:0      收藏:0      [点我收藏+]

 

  

  需求:现在有一个需求是在移动端让你禁止用户选中文字,你会怎么做呢?如下图

    技术分享图片

 

 

    解决方法:使用CSS3新增属性 user-select: none;     

  -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;

 

 

   该属性介绍:https://www.html.cn/book/css/properties/user-interface/user-select.htm#a3

 

 

   使用场景:

      ①:给某元素设置双击事件,若用户没有在第二次点击后迅速移开,就会选中文字

        技术分享图片

 

 

      ②:长按图片(可能你只是想保存图片,确出现复制文字的选项)

        技术分享图片

      ③:根据业务需要,要求明确禁止用户选中文字

 

      ④:在很多场景下,用户长按并非为了选定什么,比如拿着手机或ipad时,总是捏着屏幕中央

 

 

  兼容性:

     技术分享图片

 

 

      

     

CSS3禁止用户选中文字——user-select: none;

原文:https://www.cnblogs.com/tu-0718/p/10655843.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!