CSS user-select 属性(是否允许用户选中文本)

于 2024-05-24 16:24:20 发布
阅读量795 收藏 11
点赞数 32
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaotlantis/article/details/139177942
版权

本文操作环境：Windows7系统，CSS3版本，Dell G3电脑。

user-select，设置或检索是否允许用户选中文本

user-select 属性规定是否能选取元素的文本。

在 web 浏览器中，如果您在文本上双击，文本会被选取或高亮显示。此属性用于阻止这种行为。

user-select语法：

user-select：none |text| all | element

默认值：text

适用于：除替换元素外的所有元素

继承性：无

动画性：否

计算值：指定值

属性值：

值描述
auto默认。如果浏览器允许，则可以选择文本。
none防止文本选取。
text文本可被用户选取。
all单击选取文本，而不是双击。

说明：

设置或检索是否允许用户选中文本。

IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；

直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；

除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；

对应的脚本特性为userSelect。

兼容性：

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<style>

.test{

padding:10px;

-webkit-user-select:none;

-moz-user-select:none;

-o-user-select:none;

user-select:none;

background:#eee;}

</style>

</head>

<body>

<div onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>

</body>

</html>

这段代码结合了css+js，基本上将常用的浏览器都禁止选择了。

1

2

3

4

5

6

7

8

div {

-webkit-user-select: none; /* Safari */

-ms-user-select: none; /* IE 10+ and Edge */

-o-user-select:none;

-moz-user-select:none;/*火狐*/

-khtml-user-select:none;/*早期浏览器*/

user-select: none; /* Standard syntax */

}

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

跟随 -webkit-、-ms- 或 -moz- 的数字规定使用前缀的首个版本。

ChromeIE / EdgeFirefoxSafariOpera
54.0
6.0 -webkit-		79.0
10.0 -ms-		69.0
2.0 -moz-		3.1 -webkit-41.0
15.0 -webkit-

文章转自： https://www.cnblogs.com/suducn/p/18190039

前端77
关注
  • 32
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
user-select:none；
qq_40703860的博客
12-28 7493
css控制页面文字不能被选中user-select:none; 现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。 原因：鼠标点快了文字会被选中。 解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。 body{ -moz-user-select:none;/火狐/ -webkit-user-select:none;/webkit浏览
user-select:none
weixin_58414196的博客
07-04 587
user-select:none
移动端H5不能自由选中文本进行复制的问题
最新发布
博哥的二进制世界
03-15 2094
在写微信公众号H5的时候，发现在移动端上，H5没办法自由选中文本进行文字复制。这实际上是由于微信浏览器和其他的移动端浏览器默认给元素添加了属性造成的。既然知道是这个原因造成的，那么我们通过修改属性即可解决问题user-select有none、auto、text、contain、all、inherit、initial、unset8个属性//不可选中 user-select : auto;//自动 user-select : text;//文本可选中 user-select : contain;
遇到的知识点
2201_75791852的博客
03-01 204
遇到的一些知识点
webkit-user-select:none 问题
weixin_33858249的博客
10-20 3849
webkit-user-select:none 问题 学习了：https://bugs.webkit.org/show_bug.cgi?id=82692 最近两天做移动端游戏举报页面。遇到一个问题，移动端的input都不能输入了，后来发现可能是 －webkit－user-select ：none ; 在移动端开发中，我们有时有针对性的写一些特殊的重置，比如： ＊ { -webkit ...
CSS禁止文字选择user-select应用
11-30
需要注意的是：user-select并不是一个W3C的CSS标准属性，浏览器支持的不完整，需要对每种浏览器进行调整 复制代码代码如下: body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ ...
js禁止document element对象选中文本实现代码
01-19
false, 不可选中 function setSelectable(obj, enabled) { if(enabled) { obj.removeAttr(“unselectable”).removeAttr(“onselectstart”).css(“-moz-user-select”, “”).css(“-webkit-user-select”, “”);...
vue实现页面内容禁止选中功能,仅输入框和文本域可选
12-13
-webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{ -webkit-user-select:au
js鼠标移动时禁止选中文字
01-19
这是通过CSS样式来实现的禁止用鼠标选择功能： unselectable为IE准备 onselectstart为Chrome、Safari准备 -moz-user-select是FF的 css style:html,body{-moz-user-...屏蔽选择的样式定义：-moz-user-select属性（只
extjs表格文本启用选择复制功能具体实现
12-01
extjs提供了方便的表格组件grid供使用，但是默认情况下表格中的文本是不能被选中的，自然也是无法复制的。 而选择复制文本的需要也是很平常的，于是我们就需要自己动手来解决这个问题，实现extjs的grid文本选择复制...
css3中user-select的用法详解
weixin_34318326的博客
12-19 440
css3中user-select的用法详解 user-select属性是css3新增的属性，用于设置用户是否能够选中文本。可用于除替换元素外的所有元素，以下是user-select的主要用法和注意事项的说明，更多信息可参考如下css3文档说明。 参考链接：http://www.css88.com/book/css/properties/...
CSS user-select属性拾遗
weixin_30512785的博客
02-28 60
昨天把Notebook整理了一下，去查了一下手册，原来之前比较忽略user-select这个属性，因为之前以为只有webkit才支持的。手册进行了补充： user-select禁止用户选中文字 none：文本不能被选择text：可以选择文本all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。eleme...
移动端-webkit-user-select:none导致input/textarea输入框无法输入
verwei的博客
04-15 1799
最近在做一个h5推广页面，修修改改，总是有很多的小问题，还是归于自己不细心，还有一点就是有一些css3的属性不太熟悉。跟后端程序猿对接的时候，导致各种打包
CSS user-select: none禁止鼠标移动选择文字
weixin_45899022的博客
03-05 402
取值： none： 文本不能被选择 text： 可以选择文本 all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 element： 可以选择文本，但选择范围受元素边界的约束 当然，常用的是user-select: none 详细请看☞ https://www.html.cn/book/css/properties...
user-select介绍
精彩人生
01-31 735
来源：http://www.qianduan.net/introduce-user-select.html 这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性。 用法： 1 user-select:value; 值： auto——默认值，用户可以选中元素中的内容 none——用户不能选择元素中的任何内容 t
css3 user-select 禁止用户选择
huch的博客
05-24 6023
测试同学经常提的bug就是说怎么我长按页面上某些文字或者图片，就出现系统的一些黑色弹框，找到我说怎么会这样呢，体验不太好。我就很无语地说，那是浏览器的特性，允许用户去选择某些文字或图片，可进行下一步的操作…… 当然是可以通过如下方式禁用： body { -webkit-user-select: none; -moz-user-select: none; user-selec...
user-select的用法
05-31 4642
前几天在网页制作中，发现有些地方的文字双击就会被选中，特别丑，一点也不美观，并且有些部分的需求就是文字不可以被选中或复制，在这种情况下，我们就可以用到 user-select 了
html
weixin_46376333的博客
02-25 307
HTML 一:HTML简介 1.HTML是什么？ HTML:hyper text markup language超文本标记（标签）语言由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2.作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接来检索信息 使用表单获取用户的信息，实现交互 3.版本 W3C.world wide web consortium万维网...
css控制页面文字不能被选中user-select:none;
weixin_34390996的博客
01-09 208
css控制页面文字不能被选中user-select:none; 现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。 原因：鼠标点快了文字会被选中。 解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。 body{ -m...
user-select: none是什么意思
02-22
"user-select: none" 是 CSS 中的一个属性，它可以用来禁止用户选择文本内容。这个属性可以防止用户复制网页上的文本内容，或者在网页中使用鼠标拖动选中文本。通常，这个属性会在网页上的一些不希望被用户修改或复制的内容（例如版权声明、注意事项等）上使用。 举个例子，如果你想要禁止用户选择某个 div 元素中的文本内容，你可以这样写 CSS 代码： ```css div { user-select: none; } ``` 这样，用户就不能在这个 div 元素中选择文本内容了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值