css禁止文字被选中
有时候,为了让用户有更好的体验,需要禁用掉文本选中功能
比如:使用a标签模拟按钮,如果不禁用掉文本选中功能,那么双击时会选中文字,用起来很不爽。
多数情况下,只需要使用CSS样式就可以实现这个功能啦:
1 body{
2 -o-user-select: none;
3 -moz-user-select: none; /*火狐 firefox*/
4 -webkit-user-select: none; /*webkit浏览器*/
5 -ms-user-select: none; /*IE10+*/
6 -khtml-user-select :none; /*早期的浏览器*/
7 user-select: none;
8 }
user-select有四个值:
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element:可以选择文本,但选择范围受元素边界的约束
值得注意的是:IE6-9目前需要通过JavaScript来实现。
1 document.body.onselectstart = document.body.ondrag = function(){
2 return false;
3 }
css禁止文字被选中的更多相关文章
- css 禁止文本被选中复制代码
css 禁止文本被选中复制代码: .cus-text{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none ...
- css设置禁止文字被选中
// 禁止文字被鼠标选中 moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-se ...
- css禁止鼠标双击选中文字
div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10 ...
- css设置文字不能选中状态
高版本浏览器的处理方式 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-u ...
- [转]CSS禁止文字选择
user-select有两个值: none:用户不能选择文本 text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- css禁止双击dom节点被选中user-select:none
css禁止dom节点被选中: 当某个dom节点在快速重复点击的时候出现这个节点被选中,有时候其实并不希望出现这种情况,比如我们使用一个span或者a标签做为按钮dom元素的时候,快速双击这个按钮,就 ...
- 【css】CSS设置文字不能被选中
CSS设置文字不能被选中 /*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select ...
- JS与CSS阻止元素被选中及清除选中的方法总结
有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...
随机推荐
- 3. XML实体注入漏洞的利用与学习
XML实体注入漏洞的利用与学习 前言 XXE Injection即XML External Entity Injection,也就是XML外部实体注入攻击.漏洞是在对非安全的外部实体数据进行处理时引发 ...
- hdu1052
#include <iostream>#include<algorithm>#include<queue>#include<stack>#include ...
- 微信小程序自学第三课:文件作用域,模块化
一.文件作用域 在 JavaScript 文件中声明的变量和函数只在该文件中有效:不同的文件中可以声明相同名字的变量和函数,不会互相影响. 通过全局函数 getApp() 可以获取全局的应用实例,如果 ...
- 关于.net中的身份认证(AuthorizeAttribute)的问题
引言 新公司当初面试的时候问了我很多用户验证的问题,这里就把我的对于验证的想法写一下,希望可以有一个系统的学习记录. 一.如何验证 B/S结构的请求是http请求,个人理解的http请求有两个特点:1 ...
- ApiDoc 一键生成注释
本文来自网易云社区. 作者:盛国存 背景 我们日常在使用ApiDoc维护管理api文档,提高了api文档的整体维护性.但在老旧接口中,补充接口注解无疑是一次繁重的体力劳动.仔细查看,大多数接口的格式 ...
- 详细讲解MapReduce二次排序过程
我在15年处理大数据的时候还都是使用MapReduce, 随着时间的推移, 计算工具的发展, 内存越来越便宜, 计算方式也有了极大的改变. 到现在再做大数据开发的好多同学都是直接使用spark, hi ...
- nodebrew
创建: 2019/05/30 完成: 2019/05/30 安装 安装 curl -L git.io/nodebrew | perl - setup 更新nodebrew nodebrew sel ...
- webpack@3.6.0(1) -- 快速开始
本篇内容 前言 配置入口和输出 热更新 loader配置 js代码压缩 html的打包与发布 前言 //全局安装 npm install -g webpack(3.6.0) npm init //安装 ...
- nginx 服务器并发优化
apache 提供的 ab 可以对服务器进行压力测试, 安装 ab: apt-get install apache2-utils 安装完后,ab 在目录 /usr/bin/ 下的. 执行: ab ...
- 《OD学hadoop》20160904某旅游网项目实战
一.ETL操作 抽取数据 日志格式: 分割符号:^A IP地址 服务器时间 二.Java工程 1. 创建项目 copy代码及配置文件 2. 改配置 core-site.xml hbase-site.x ...