HTML5学堂-码匠 HTML5学堂

您当前位于:CSS3 ——> CSS3 user-select 禁选文本,如何让用户无法选中文本

CSS3 user-select 禁选文本,如何让用户无法选中文本

2015/07/03 07:55:15 | 作者:HTML5学堂(码匠) | 分类:CSS3 | 关键词:css3,user-select,禁选文本

CSS3 user-select 禁选文本

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

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

欢迎沟通交流~HTML5学堂

基本语法:

user-select: value;

value取值:

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

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

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

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

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

欢迎沟通交流~HTML5学堂

禁选文本书写方式:

我们先来看个效果:

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学堂 CSS3禁选文本  H5course

禁用文本效果:

HTML5学堂 CSS3禁选文本  H5course

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端