js一键复制 点击复制内容到剪切板.select()方法 禁止键

开发的时候遇到一个需要实现一键复制的功能，点击按钮可以复制内容到剪切板，本文做简单记录。

场景描述

做移动端网页的时候，遇到一个需求，点击页面按钮，可以复制页面内容到剪切板。
如下图所示，点击按钮，复制页面展示排名信息。拿到文字信息之后，可以粘贴转发。

复制文本.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("已复制");
}

注意事项

1. 网页上的内容展示时具有设置的样式，复制之后得到的为纯文本没有样式，按照本文所写换行仍然存在。

   
   粘贴.jpg

2. document.getElementById中的id为想要复制文本内容的整个容器添加的id。

3. <input>和<textarea>两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。因为本文复制内容比较复杂，且只复制展示文本，所以使用了innerText进行获取。如果只是简单复制某一句话，则可以直接赋值value：let value = "好好学习，天天向上。"

4. 在调用select()方法时，大多数浏览器都会将焦点设置到文本框。因此需要设置textarea.disabled = true，否则将会有键盘弹起一闪而过的画面。设置文本框禁用之后，将不会出现聚焦调起键盘。

5. 通过测试发现，textarea.disabled = true禁止键盘弹起，在苹果手机 iOS系统中好像无效，键盘依然会一闪而过。这种时候可以通过调用document.activeElement.blur();阻止键盘弹出生效。

原理解释：当点击输入框时，document.activeElement 获得了 DOM 中被聚焦的元素，即用户点击的input或者textarea。此时再调用.blur() 方法，取消聚焦。即获得被聚焦的元素然后强制 blur 以达到没有聚焦的样子。

参考链接

移动端禁止 input 唤起键盘弹出