移动端长按文字复制功能 - 王振宇

做移动端项目的时候产品提了一个长按文字复制的功能，第一反应是这个不是Webview自带的功能吗?

打开APP自己试了下，发现果然无法长按复制，后来发现是因为公共CSS文件中设置了 user-select:none ，之所以设置该属性是因为html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。比如常见的鼠标点快了文字会被选中并且出现难看的色块。

 user-select 属性共有四个值，分别为：

none:文本不能被选择

text:可以选择文本

all：当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素，那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。

element:可以选择文本，但选择范围受元素边界的约束

注意事项：

1、搜索的时候看到别人博客说在iphone7 ios10的时候无法选中，需要给父元素添加 user-select:text 原文链接：https://www.cnblogs.com/surfaces/p/6432712.html。公司找了同事的iphone7测试了下，没发现问题，但是保险起见，还是加上了

2、 user-select 属性写的时候需要添加浏览器前缀，当然现在一般在构建项目的时候都有postcss或者Autoprefixer插件自动添加

3、需要复制的元素尽量用p标签，其他元素会存在复制不了的问题

示例如下：

css代码如下:

.contentBox,.contentBox p{
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

dom结构如下：

<div class="contentBox">
    <p>我是需要复制的内容</p>
</div>

 

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。