前言
在写微信公众号H5的时候，发现在移动端上，H5没办法自由选中文本进行文字复制。这实际上是由于微信浏览器和其他的移动端浏览器默认给元素添加了user-select: none;属性造成的。既然知道是这个原因造成的，那么我们通过修改user-select属性即可解决问题
user-select介绍以及兼容性
user-select有none、auto、text、contain、all、inherit、initial、unset8个属性
/* Keyword values */ user-select: none; //不可选中 user-select: auto; //自动 user-select: text; //文本可选中 user-select: contain; // 允许在元素内选择；但是，选区将被限制在该元素的边界之内。 user-select: all; //在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。 /* Global values */ user-select: inherit; user-select: initial; user-select: unset; /* Mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* WebKit-specific values */ -webkit-user-select: none; -webkit-user-select: text; -webkit-user-select: all; /* Doesn't work in Safari; use only "none" or "text", or else it willallow typing in the <html> container */ /* Microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; -moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */ -webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */ -o- /* Opera浏览器(早期) */ -ms- /* Internet Explorer (不一定) */
解决办法
通过设置user-select: all;即可放开限制，让H5的文本能够自由选中文字复制。但是我们也需要注意兼容性问题。
user-select: all; -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; -ms-user-select: all;
