user-select

前言 做网页的时候，有些文字我们需要能被选中，有些我们不要能被选中，那么这就需要用到一个css属性了，那就是 user-select 使用方法 user-select: none|auto|text|contain|all; /*firefox浏览器*/ -moz-user-select: none|text|all; /*safari、chrome浏览器*/ -webkit-user-select: none|text|all; /*Safari中不支持该属性值，只能使用none或者text，或者是在html的标签属性中使用*/ /*ie浏览器*/ -ms-user-select: none|text|element; 属性值： none : 元素和子元素的文本将无法被选中 text : 文本可以被选中 auto : 文本将根据浏览器的默认属性进行选择 all : 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素 contain、element : 可以选择文本，但选择范围受元素边界的约束，也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer 注意： 浏览器实现之间的区别之一是继承。在Firefox中，-moz-user-select不是由绝对定位的元素继承的

　　我们在页面输入的文本按理来说应该都是可以选中的，但是如何才能让显示出来的文本或是图片不被选中呢，这时候就需要用到 user-select 属性。 user-select user-select （CSS属性），控制着用户能否选中文本。除了在文本框中，在 Chrome浏览器中对已经加载的文本没有影响。 一、语法： user-select：none / text / all / element / auto user-select 属性的默认值为 text，没有继承性，适用于替换元素外的所有元素。 二、属性值： 　　 none ：文本不能被选中。注意这个 Selection 对象包含这些元素。从 Firefox21 开始，none表现的想 -moz-none，因此可以使用 -moz-user-select ：text 在子元素上重新启用选择。 　　 text ：默认值，可以选中文本 　　 all ：当所有内容可以作为一个整体被选择。（如果双击或是在上下文上点击子元素，那么包含该元素的子元素也将被选中。） 　　 element ：可以选择文本，但是选择范围受元素边界的约束 　　 auto ：auto的计算值确定如下： 在::before 和 ::after 伪元素上，计算的属性是 none 如果元素是可编辑元素，则计算值是 contain 否则，如果此元素的父元素的 user

遇到的问题 微信上要实现一个点击复制兑换码的功能，上网找了很久，找到了 zero clipboard 插件只能在PC端用，手机端并没有比较好的解决方案，无奈苦逼找产品商量，改为长按复制。 解决方案 微信默认就是支持文本长按选择，所以只需要调整字体样式后，几乎不需要写什么代码，这份任务就完成了，但是。。。情况并不如我所想。 找了半天并没有发现什么异样，但是就是长按无法复制。 解决思路 1.新写一个页面，在微信端浏览，发现可以长按复制(排除微信端不能长按复制的猜想) 2.删除原页面的脚本文件，发现可以仍然不可以长按复制(排除脚本影响) 3.删除原页面公共css，发现可以长按复制(确定公共css影响) 4.逐一排查，发现一个css声明 -webkit-user-select:none; 关于user-select 以下内容摘自 css参考手册 语法 user-select：none | text | all | element 默认值：text 适用于：除替换元素外的所有元素 继承性：无 动画性：否 计算值：指定值 取值 none：文本不能被选择 text：可以选择文本 all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 element：可以选择文本，但选择范围受元素边界的约束 说明

遇到的问题 微信上要实现一个点击复制兑换码的功能，上网找了很久，找到了 zero clipboard 插件只能在PC端用，手机端并没有比较好的解决方案，无奈苦逼找产品商量，改为长按复制。 解决方案 微信默认就是支持文本长按选择，所以只需要调整字体样式后，几乎不需要写什么代码，这份任务就完成了，但是。。。情况并不如我所想。 找了半天并没有发现什么异样，但是就是长按无法复制。 解决思路 1.新写一个页面，在微信端浏览，发现可以长按复制(排除微信端不能长按复制的猜想) 2.删除原页面的脚本文件，发现可以仍然不可以长按复制(排除脚本影响) 3.删除原页面公共css，发现可以长按复制(确定公共css影响) 4.逐一排查，发现一个css声明 -webkit-user-select:none; 关于user-select 以下内容摘自 css参考手册 语法 user-select：none | text | all | element 默认值：text 适用于：除替换元素外的所有元素 继承性：无 动画性：否 计算值：指定值 取值 none：文本不能被选择 text：可以选择文本 all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。 element：可以选择文本，但选择范围受元素边界的约束 说明

－webkit－user-select ：none ; 在移动端开发中，我们有时有针对性的写一些特殊的重置，比如： ＊ { -webkit - touch - callout: none; //-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为 //禁用Webkit内核浏览器的文字大小调整功能。 -webkit-text-size-adjust: none; //避免点击a标签或者注册了click事件的元素时产生高亮 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // //禁止用户进行复制.选择 . -webkit-user-select: none; } 其中，－webkit－user-select ：none ；会产生一些问题。 这是webkit内核浏览器下的一个bug，具体可以参考这篇文章： https://bugs.webkit.org/show_bug.cgi?id=82692 阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，比如input、testarea。 如果网站不需要阻止用户的选择内容的行为就可以使用如下样式： { -webkit-user-select: text; -user-select: text; } 另一种方式： *: not(input,