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

    

    解决方法:使用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;的更多相关文章

  1. c# webbrowser  获取用户选中文字

    原文:c# webbrowser  获取用户选中文字 最近一直被一个问题困扰,有一个文本框,一个webbrowser控件,一个上下文菜单, webbrowser  获取用户选中文字" tit ...

  2. css禁止用户选中文本(转)

    body{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE1 ...

  3. css禁止鼠标双击选中文字

    div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10 ...

  4. 纯CSS如何禁止用户复制网页的内容?

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  5. js禁止复制页面文字

    做项目的时候有客户提出要求,不能用用户浏览他发表的文章时复制他的文章 一种比较简单的方法,禁止用户选中页面的文字和禁止用户右键菜单 document.oncontextmenu = new Funct ...

  6. css取消双击选中文字

    在我们在写前端页面的时候,由于手速过快(当然这都是指的老司机),会经常双击,浏览器就会默认选中你双击的文本,这种感觉有点不太好. 这个时候就用到了 user-select:none; 属性. 因为存在 ...

  7. html body标签的几个属性 禁用鼠标右键,禁用鼠标选中文字等

    <body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onsel ...

  8. css3应用之自定义选中文字的背景颜色

    在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理.其实这样是很符合用户体验的.因为有很多的人会用鼠标选择着一行一行的阅读.其中就包括本人... 浏览器中默认的选中的文字颜色为白色, ...

  9. 用js onselectstart事件鼠标禁止选中文字

    禁止鼠标选中文本,针对不同浏览器有不同的写法.常见的是onselectstart表示禁止鼠标选中文本.其中用js可以在页面中写 onselectstart="return false&quo ...

随机推荐

  1. LoadRunner场景设置

    创建负载测试场景场景目标:模拟10家旅行社同时登陆.搜索航班.购买机票.查看航班路线并退出打开Controller并创建一个新场景1.打开HP LoadRunner2.打开Controller在Loa ...

  2. <!特别的一天>

    <!DOCTYPE html> <html> <head> <meta charset="gb2312/"> <title&g ...

  3. chrome启动参数之

    --remote-debugging-port Chrome 启动的时候,默认是关闭了调试端口的,如果要对一个目标 Chrome PC 浏览器进行调试,那么启动的时候,可以通过传递参数来开启 Chro ...

  4. js获取当前时间并实时刷新

    效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...

  5. leetcode python快乐数

    编写一个算法来判断一个数是不是“快乐数” “快乐数”的定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复该过程直到为1,也可能是无限循环但始终变不到1. 如果可以变为1,那 ...

  6. CentOS 7 配置静态IP后不生效 & Job for network.service failed

    参考:http://tieba.baidu.com/p/3233996339#57290767555l 在CentOS中配置静态IP后不生效. 解决办法:将/etc/sysconfig/network ...

  7. [原创][Synth 8-2543] port connections cannot be mixed ordered and named ["*_Top.v":1151]

    Vivado综合错误: [Synth 8-2543] port connections cannot be mixed ordered and named ["*_Top.v":1 ...

  8. swagger出现no response from server错误的解决办法

    解决办法:1.启用80端口2.如果不是使用的80端口,是用的nginx做了映射的其他端口的话可以用Springfox swagger-ui 覆盖默认request host,加上这个在spring的应 ...

  9. 我的Python笔记补充:入门知识拾遗

    声明:本文整理借鉴金角大王的Python之路,Day1 - Python基础1,仅供本人学习使用!!! 入门知识拾遗 一.bytes类型 二.三元运算 1 result = 值1 if 条件 else ...

  10. ImCash:韩国最大交易所遭遇至暗时刻:2018年亏损1.8亿美元

    Bithumb上个月遭到黑客攻击,随后要求用户小心存款,该公司报告称损失1.8亿美元(合2050亿韩元). 据<韩国时报>(Korea Times)报道:受到熊市影响,数字货币交易所实际交 ...