前言
移动端项目开发中，经常遇到需要复制文字的场景，今天咱们就来聊一下，移动端复制文字的那些事~
效果预览
背景分析
业务需求很简单，将指定的文字(例如: 关键字、文案描述等)复制到手机的剪贴板上，方便用户直接进行粘贴
解决方案
相关API
document.execCommand
该方法允许运行命令来操纵可编辑内容区域的元素，其中执行 copy 命令，可以将当前选中的内容拷贝到剪贴板中。兼容性如下所示:
setSelectionRange
该方法用于设定 input 或 textarea 元素中当前选中文本的起始和结束位置，接受两个参数：被选中的第一个字符的位置索引、被选中的最后一个字符的下一个位置索引。兼容性如下所示:
select
该方法和 setSelectionRange 类似，唯一区别是 select 是全选，而 setSelectionRange 是手动指定选中范围
实现思路
DOM
在某一个 DOM 元素中添加一个容器 DOM ，然后在容器 DOM 中追加 input 标签，并重置 input 的默认样式，同时将容器 DOM 的宽度位置为 1 ，透明度设置为 0
.input_wrap {
position: absolute;
top: 0;
left: 0;
width: 1px;
opacity: 0;
overflow: hidden;
user-select: none;
}
.input_wrap input {
width: 1px;
resize: none;
border: none;
outline: none;
user-select: none;
color: transparent;
background: transparent;
}
JS逻辑
首先获取我们事先隐藏好的 input 元素，接着将 input 的 value 设置为待复制的文本，然后将焦点聚集在 input 上，再使用 setSelectionRange 方法选中待复制的文本，最后使用document.execCommand('copy')执行复制命令，即可将相关文本复制到客户端的剪贴板中
const input = document.getElementById('input');
input.value = '待复制的文本内容';
// 聚焦
input.focus();
// 选择需要复制的文本
if (input.setSelectionRange) {
input.setSelectionRange(0, input.value.length);
} else {
input.select();
}
try {
const result = document.execCommand('copy');
console.error(result ? '内容已复制' : '复制失败，请重试~');
} catch (e) {
console.error('复制失败，请重试~');
}
体验优化
尽管我们已经实现了复制的能力，但是复制之后页面上会出现输入键盘，为了更好的用户体验，我们需要想办法屏蔽键盘
blur
我们为了选中待复制的文案，手动调用了 input 的 focus 方法进行聚焦，为了屏蔽键盘，我们可以在复制结束后手动调用 input.blur() ，让键盘自动隐藏
activeElement
尽管我们手动调用了 blur 释放焦点，但是部分机型上仍然会弹出输入键盘，这里想到的解决方案是使用 document.activeElement.blur() 来进行二次屏蔽，最终实践效果还不错，基本所有机型都不会弹出输入键盘，或者弹出键盘后立马回弹消失
小结
移动端实现复制能力，主要还是依赖HTML文档暴露的API来实现，最后花费时间最多的还是在进行体验优化上
参考资料
源码地址

遇到的问题

微信上要实现一个点击复制兑换码的功能，上网找了很久，找到了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：可以选择文本，但选择范围受元素边界的约束

说明

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

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。

兼容性

需求:

这里有一个客服微信号, 需要用户点击并复制到粘贴板

html
<div id="number" onclick="copy()">139xxxx7772</div>
<textarea id="input"></textarea>

js
function copy() {
    const text = document.getElementById('number').innerText;
    const input = document.getElementById('input');
    input.value = text;
    input.select(); // 选中文本
    input.setSelectionRange(0, input.value.length); // 这里兼容 ios
    document.execCommand("copy");
    input.blur(); // 这里记得写哟, 不然会弹出手机的软键盘
  	alert('复制成功!')
  }

移动端开发 H5 页面在 iOS手机上无法实现 长按复制文本
百度谷歌搜索的答案是 iOS手机系统自带 需要设置禁用 我们需求是要实现此功能 可是我在手机测试 并没有实现长按复制文本 之前这样设置可以实现复制文本 这次却无法 实现
需要实现复制右下角微信号 另外我给提交按钮设置属性 就可以实现 求大神解惑
p.dctxixi{
float:right;
padding: 0 0.3rem 0;
line-height: 1.2rem;
height:1.2rem;
width:4rem;
border:none;
-webkit-touch-callout:inherit;
-webkit-user-select:text !important;
user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
}
}