开发的时候遇到一个需要实现一键复制的功能，点击按钮可以复制内容到剪切板，本文做简单记录。
场景描述
做移动端网页的时候，遇到一个需求，点击页面按钮，可以复制页面内容到剪切板。
如下图所示，点击按钮，复制页面展示排名信息。拿到文字信息之后，可以粘贴转发。
复制文本.jpg
代码实现
<div class="rank-con" id="rankText">
<div class="one-person" v-for="item in list" :key="item.id">
<span class="name">{{item.name}}：</span>
<span class="desc">
第{{item.rank}}名；数学 {{item.math}}分；语文 {{item.chinese}}分。
</span>
</div>
</div>
<div class="btn" @click="copyText">复制文本</div>
copyText() {
let value = document.getElementById("rankText").innerText;
let textarea = document.createElement("textarea"); //创建临时文本区域元素
textarea.value = value; //将要复制的内容赋值给该文本区域
document.body.appendChild(textarea); //添加到页面中
textarea.select(); //选中文本区域的内容
document.execCommand("copy"); //执行复制命令
textarea.style.display = "none"; //textarea隐藏，否则会出现在页面上
textarea.disabled = true; //textarea禁用
console.log("已复制");
}
注意事项
-
网页上的内容展示时具有设置的样式，复制之后得到的为纯文本没有样式，按照本文所写换行仍然存在。
粘贴.jpg document.getElementById中的id为想要复制文本内容的整个容器添加的id。
<input>和<textarea>两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。因为本文复制内容比较复杂，且只复制展示文本，所以使用了innerText进行获取。如果只是简单复制某一句话，则可以直接赋值value：let value = "好好学习，天天向上。"
在调用select()方法时，大多数浏览器都会将焦点设置到文本框。因此需要设置textarea.disabled = true，否则将会有键盘弹起一闪而过的画面。设置文本框禁用之后，将不会出现聚焦调起键盘。
通过测试发现，textarea.disabled = true禁止键盘弹起，在苹果手机 iOS系统中好像无效，键盘依然会一闪而过。这种时候可以通过调用document.activeElement.blur();阻止键盘弹出生效。
原理解释：当点击输入框时，document.activeElement 获得了 DOM 中被聚焦的元素，即用户点击的input或者textarea。此时再调用.blur() 方法，取消聚焦。即获得被聚焦的元素然后强制 blur 以达到没有聚焦的样子。
