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

    

    解决方法:使用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. bzoj 2741

    题目描述:这里 一道非常好的题 由于强制在线,我们必须要用一些数据结构来处理 考虑分块:将整个序列分块,块内部分预处理,块外部分暴力处理 对于每个块,计算出以这个块的左端点为端点,向右枚举这个块以后的 ...

  2. Java中三种代理模式

    代理模式 代理(Proxy)是一种设计模式,提供了间接对目标对象进行访问的方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的功能上,增加额外的功能补充,即扩展目标对象的功能. 这就 ...

  3. 《ServerSuperIO Designer IDE使用教程》- 5.树形结构管理设备驱动,小版本更新。发布:v4.2.3.1版本

    v4.2.3.1 更新内容:1.选择和管理设备驱动,增加树状结构显示.2.优化ide代码,核心代码没有改动.下载地址:官方下载 5. 树形结构管理设备驱动,小版本更新 5.1    概述 此次升级主要 ...

  4. tensorflow优化器-【老鱼学tensorflow】

    tensorflow中的优化器主要是各种求解方程的方法,我们知道求解非线性方程有各种方法,比如二分法.牛顿法.割线法等,类似的,tensorflow中的优化器也只是在求解方程时的各种方法. 比较常用的 ...

  5. ImCash是骗局吗?到底是真是假?

    关于风靡北美的ImCash是不是骗局,ImCash项目安全靠谱么?下面我将为你分析: 今天关于北美ImCash量子基金这个项目谈谈我个人的看法: 首先选择项目我最先看的是制度,如果奖金制度不好,其他的 ...

  6. recyclerview嵌套GridView去屏蔽后者的点击事件,而是前者响应到事件。

    无论是标题中的嵌套方式,还是其它列表控件之间的嵌套,都适用. 1.在GirdView的所在布局的根布局中设置改属性: android:descendantFocusability="blac ...

  7. Mac下使用数据库将Excel数据转换存入.plist

    记录于2013/10/26   基本步骤: 1.将Excel表格另存为.csv格式 2.用类似TextWrangler工具将.csv文件转成UTF-8格式 3.使用火狐插件SQLite Manager ...

  8. <玩转Django2.0>读书笔记:表单

    1. 表单字段 参考: 官方文档 Django表单字段汇总 2. 表单代码示例(forms.Form) # form.py代码 # 获取数据库数据 choices_list = [(i+1,v['ty ...

  9. Influxdb+Grafana+Telegraf及docker中运行

    目录 参考资料 1. InfluxDB 1. 特征: 2. 特点: 3. 功能及默认 4. 主要概念 1) 与SQL的名词做比较 2) InfluxDB的独有概念 5. 常用命令 1. 用户管理: 6 ...

  10. SpringInAction学习笔记(一):核心概念

    Spring自带了多种应用上下文 AnnotationConfigApplicationContext:从一个或多个java配置类中加载应用上下文 AnnotationConfigWebApplica ...