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

    

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

  1.   -webkit-user-select:none;
  2. -moz-user-select:none;
  3. -o-user-select:none;
  4. 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. Unity中各种格式计时器

    问题背景: 在开发游戏过程中,很多地方需要倒计时,但是各种地方要的倒计时格式不同,倒计时都会写,在这里不详细介绍,写的目的就是为了记录一下,方便复用(为了在开发过程中不为了小问题浪费不必要脑细胞) 1 ...

  2. python-shutil学习

    shutil:高级的 文件.文件夹.压缩包 处理模块 1. shutil.copyfileobj(fsrc, fdst[, length])(copyfileobj方法只会拷贝文件内容)将文件内容拷贝 ...

  3. github徽标引入

    官网: https://shields.io/ 示例: ![](https://img.shields.io/badge/language-go-cccfff.svg?style=popout-squ ...

  4. RabbitMQ开启服务却无法登录

    我之前无聊之际修改了我的电脑名,后来发现我的rabbitmq服务无法开启,后来我又把电脑名改回去了还是不行,我从网上看了很多教程都没有成功,后来看到了这个方法,出处忘记了,不好意思,发出来记忆一下 包 ...

  5. python-初识python

    一.计算机的初步认识 硬件:内存,主板,CPU,硬盘,显卡,显示器等 内存: 优点:存取速度快 缺点:断电后数据会全部丢失 硬盘: 优点:断电后数据也会永久保存 缺点:存取速度远远慢于内存 1.操作系 ...

  6. Netty实现心跳机制

    netty心跳机制示例,使用Netty实现心跳机制,使用netty4,IdleStateHandler 实现.Netty心跳机制,netty心跳检测,netty,心跳 本文假设你已经了解了Netty的 ...

  7. js事件流机制冒泡和捕获

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...

  8. Ubuntu 16.04.3 LTS u盘-安裝教程(填坑)

    Ubuntu 16.04.3 LTS 下载地址: https://www.ubuntu.com/download/desktop 下载u盘后文件为iso,可以选择UltraISO制作U盘启动,也可以直 ...

  9. Axure RP 8 软件介绍

    介绍 此软件可以用于制作快速原型,也可以绘制中保真原型草图. 应用人群:产品经理.交互设计师.UI设计师.网页设计师. 原型分类:低保真(手绘草图).中保真(使用相关软件绘制出来的).高保真(包含效果 ...

  10. (二)shell中的变量

    1.常用系统变量 $HOME.$PWD.$SHELL.$USER等 2.自定义变量 基本语法: (1)定量变量:变量=值 (2)撤销变量:unset 变量 (3)声明静态变量:readonly变量 注 ...