移动端长按文字复制功能

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

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

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

none:文本不能被选择

text:能够选择文本

all：当全部内容做为一个总体时能够被选择。若是双击或者在 上下文上点击子元素，那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。

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

注意事项：

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

二、 user-select 属性写的时候须要添加浏览器前缀，固然如今通常在构建项目的时候都有postcss或者Autoprefixer插件自动添加

三、须要复制的元素尽可能用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>

 

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