html禁止文本选择,[译]用CSS来禁止文本选择
有些时候我们需要禁止网页的部分文本不能被选择。你可以使用user-select这个CSS特性来实现这个需求。
举例
下面是一个使用了disable-selection类的样式规则,当它作用于一个HTML元素的时候,它会让我们不能够选择这个元素。
.disable-selection{
-moz-user-select:none; /* Firefox */
-ms-user-select:none; /* Internet Explorer */
-ktml-user-select:none; /* KHTML浏览器(比如:Konqueror) */
-webkit-user-select:none; /* Chrome,Safari,and Opera */
-webkit-touch-callout:none; /* Disable Android and IOS callout */
}
关于这些样式的一些细节的解释:
-webkit-user-select是给Chrome,Safari和Opera用的(并不需要使用-o-user-select)。
没有前缀的user-select是被故意略去的。
-webkit-touch-callout属性可以让在移动设备上的触摸后弹出失效。就像下面的这些,我们可以让它们不能出现。
演示
要时常记住的
有一个陷阱就是:user-select并不是W3C规范中标准的CSS特性。尽管user-select通过添加浏览器前缀有很好的浏览器支持。
前面的例子中,我没有使用没有前缀的user-select特性声明。那是因为在web标准中根本就没有这个属性。我们可以对它的使用类比于于IE专有的CSS属性ms-filter或者-ms-text-kashida-space的属性的使用。
其他需要注意的地方:
user-select是有问题并且是不稳定的。有些时候你依然还是可以选择文本,特别是当你从没有被屏蔽掉文本选择的文本的那部分开始选择。
使用全选快捷键有些时候还是会把屏蔽文本选择(Win:Ctrl+A/Mac:Cmd+A)。这种情况你可以在IE11中清楚的了解到。
这不是一种万全的保证文本不被选择的策略。CSS能够很容易被屏蔽。这种技巧依赖于非标准的CSS特性,这意味着未来对这个属性的可持续支持上面存在着很大的不确定性。
屏蔽掉文本选择是很恼人的。我会在渐进提升的过程中使用这个技巧:只有当它可以提高使用支持这个user-select特性的浏览器和设备的用户的用户体验的时候才使用它。但是,我绝不会把它设置成一个大范围的CSS选择器像全部选择器(*)或者body.
这个user-select特性可能会让你的样式表失效。如果遵循标准对你来说非常重要,使用这个属性会在你使用规范测试比如说CSS Validation Service的使用出现问题
浏览器支持
更新于:2015年3月
浏览器
版本支持(以上)
Chrome
6
Firefox
2
IE
10
Safari
3.1
移动端
浏览器
版本支持(以上)
Chrome(Android)
2.1
Safari(IOS)
3.2
html禁止文本选择,[译]用CSS来禁止文本选择相关推荐
- html文本阴影水平垂直,CSS中使用文本阴影与元素阴影效果
文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
- HTML5文本框怎么透明,css怎么设计文本框透明度
css怎么设计文本框透明度 给input设置的css属性: background 和 color ,都用rgba 比如background: rgba(255,255,255,0.5); color: ...
- css样式设置文本框为只读,css怎么将文本框设置为只读
css将文本框设置为只读的方法是,在input文本框中添加readonly属性即可.readonly属性是一个布尔属性,该属性用来规定输入字段是只读的. 本文操作环境:windows10系统.css ...
- HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- css合并两个文本框,css实现input文本框的双边框美化
css实现input文本框的双边框美化 .input_div{width:250px; height:22px; border-style:solid; border-width:1px 0 1px ...
- css禁用选中文本_使用CSS禁用文本选择突出显示
css禁用选中文本 Introduction: 介绍: Texts are the most fundamental elements of any websites or web pages, th ...
- 【译】CSS 十六进制颜色揭秘
本文讲的是[译]CSS 十六进制颜色揭秘, 原文地址:CSS Hex Colors Demystified 原文作者:Dave Gash 译文出自:掘金翻译计划 本文永久链接:github.com/x ...
- html 文本强调,CSS Emphasis Marks 文本强调标记
我们常常会在网页中对文本某一关键词进行凸显强调,加粗.高亮.下划线等等一系列相对匹配的样式去装饰进而引起用户注意,今天我们看看另一种实现方法text-emphasis. 页面文本段落中,有时我们会根据 ...
- html如何设置文本斜体,CSS/HTML:使文本斜体的正确方法是什么?
Rupert Madden-Abbott 194 html css semantic-markup 使文本斜体的正确方法是什么?我见过以下四种方法: Italic Text Italic Text I ...
最新文章
- java 文件写入 读取_JAVA文件的两种读取方法和三种写入方法
- ionic模版引擎及循环
- Android OkHttp之 offline cache
- python怎么运行代码-python代码如何运行
- android 双人黑白棋开发博客,黑白棋 - 软件资讯 - 课堂党年级博客
- 红帽oracle关系,redhat和oracle linux kernel对应关系
- stm32超声波测距代码_干货!特斯拉Autopilot核心传感器解读超声波雷达篇
- tcp unity 图片_Unity 简易聊天室(基于TCP)(2)
- java gson 工具类_GSON 实体 转换工具类
- 拼图游戏和它的AI算法
- php root权限执行命令,如何使用PHP执行需要root权限的系统命令
- github高级搜索技巧_百度搜索引擎高级使用技巧
- 有什么方法可以将WMV格式转换成MP4格式
- 市场的各大TWS蓝牙耳机芯片方案汇总
- python3写入txt_[Python3] 写入文本文件[TZZ]
- C#线性表约瑟夫环(Joseph Ring)
- Partition table entries are not in disk order 解决方法
- 山东航天九通车联网:大数据技术引领为智慧物流赋能
- 财务会计上的凭证冲销和SAP中的凭证冲销(红冲、蓝冲)
- 2021-04-12——新特性Lambda表达式和Function函数式接口编程