CSS3 user-select 禁选文本

HTML5学堂:当我们在访问一个文章网站的时候,常常因为拖拽的时候误选文字,给我们的一种不好的用户体验,而我们可以用CSS3的user-select属性禁选文本来解决这个问题,另外为了防止用户的复制和转载,我们也可以使用user-select属性]解决这个问题.

请谨慎使用这个属性:因为大部分用户是来查看信息的,他们可以复制并存储下来以备将来之用,所以这种方法既无用也无效。如果你禁用了复制粘贴功能,用户还是可以通过查看源文件来获取到他们想要的内容。接下来我们具体来了解一下user-select属性。

基本语法:

user-select: value;

value取值:

auto默认值,用户可以选中元素中的内容

none用户不能选择元素中的任何内容

text用户可以选择元素中的文本

element文本可选,但仅限元素的边界内(只有IE和FF支持)

all在编辑器内,如果双击/上下文点击发生在子元素上,改值的最高级祖先元素将被选中,IE不支持改值。

禁选文本书写方式:

我们先来看个效果:

1.结构代码

  1. <div class="h5course">欢迎沟通交流 ~ HTML5学堂!</div>

2.样式代码

  1. .h5course {
  2. -webkit-user-select: none; /*webkit浏览器*/
  3. -moz-user-select: none; /*火狐*/
  4. -ms-user-select: none; /*IE10*/
  5. -khtml-user-select: none; /*早期浏览器*/
  6. user-select: none;
  7. }

3.查看效果

未禁用文本效果:

禁用文本效果:

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hotqin888的专栏

bootstrap treeview实现target功能,iframe中打开页面

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

652
来自专栏企鹅号快讯

常见的前端面试题,总有一点让你涨知识

首先在面试时,我会大声说:"本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、PHP、ASP、C、C++、C#、Java、R...

1967
来自专栏一“技”之长

AppleWatch开发入门九——Watch帧动画的实现

        动画一直是iOS系统的一大亮点,CoreAnimation和粒子效果的支持,开发者可以很容易的做出效果炫酷的动画特效。在watchOS中,由于性...

712
来自专栏24K纯开源

Qt Style Sheet实践(一):按钮及关联菜单

导读      正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。...

2725
来自专栏一个爱瞎折腾的程序猿

Ajax 文件上传

原文地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html

991
来自专栏PPV课数据科学社区

pyspider 爬虫教程 (1):HTML 和 CSS 选择

虽然以前写过 如何抓取WEB页面 和 如何从 WEB 页面中提取信息。但是感觉还是需要一篇 step by step 的教程,不然没有一个总体的认识。不过,没想...

3547
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上实现散落点图表功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

722
来自专栏腾讯NEXT学位

CSS模块化的演进

? | 导语 CSS 做为 Web 技术的基石,从一开始就展示出了巨大的潜力。它的入门非常简单,你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升...

1102
来自专栏飞雪无情的博客

Android技术文档翻译--工具属性(Tools Attributes)

原文地址 http://tools.android.com/tech-docs/tools-attributes

1113
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

603

扫码关注云+社区