js实现复制粘贴

谁抢了我的陌年
570 阅读2分钟

最近有一个关于这方面的项目需求，所以自己总结一下，目前实现这个功能的方法主要有以下几种：

  1. execCommand()

  2. Clipboard

  3. 第三方库 clipboard.js

document.execCommand()

MDN文档给出的提醒是已废弃：此功能已过时。 尽管它可能在某些浏览器中仍然有效，但不鼓励使用它，因为它可以随时被删除。 尽量避免使用它。但是在第三方库clipboard.js中仍然有使用，源码我也没详细看，估计也是多种方法集合，使用之前判断有没有失效

下面简单介绍一下execCommand的用法

 <input type="text" id="input" value="123">
 <button onclick="copy()">copy</button>
 <script>
  function copy() {
  const inputEle = document.querySelector('#input');
  inputEle.select();
  // 必须得由用户手动调用才能触发
  document.execCommand('copy');
  // cut、delete（删除选中元素） 同理
  // document.execCommand('cut');
  }
 </script>

copy、cut等命令会返回一个布尔值，确定浏览器此功能是否可用。

考虑到安全原因, document.execCommand('paste')操作已经被禁止了。

如果想使用 execCommand 方法，又不想页面中出现可编辑区域，可以用下述办法取巧

 <button onclick="copy2Clipboard('隐藏复制！！！')">copy</button>
 <script>
  function copy2Clipboard(content) {
  const dom = document.createElement('input');
  dom.value = content;
  document.body.appendChild(dom);
  dom.select();
  document.execCommand('copy');
  document.body.removeChild(dom);
  };
 </script>

经调研，execCommand命令存在以下缺陷

  1. 不够灵活，只能操作input, textarea或具有contenteditable属性的元素

  2. execCommand是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。

  3. 有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应，这个问题clipboard也有。

Clipboard

剪贴板 Clipboard API 提供了响应剪贴板命令与异步读写系统剪贴板的能力。从权限Permissions API获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。

  1. Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境可正常使用

  2. 与粘贴板相关的权限有两个，clipboard-write（写权限）和clipboard-read（读权限）。写权限”自动授予脚本，而“读权限”因为涉及到用户隐私，必须由用户明确同意授权。

  3. 直接调用会出现 DOMException: Document is not focused.最好主动触发，如 click 后调用。

该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。

可用navigator.clipboard属性来检测浏览器是否支持该API，若返回undefined则不支持

读取粘贴板

 <button onclick="readClip()">readClip</button>
 <script>
  function readClip() {
      // 读取文本
      navigator.clipboard.readText().then(clipText => console.log(clipText));
          // navigator.clipboard.read() 读取数据，比如图片
      }
 </script>

可通过如下方式查看是否有相关读写权限

 navigator.permissions.query({ name: 'clipboard-write' });

写入粘贴板

 <button onclick="copy2clip()">copy2clip</button>
 <script>
  function readClip() {
  // 写入文本
  navigator.clipboard.writeText("写入到粘贴板").then(() => console.log("成功写入剪贴板"));
  // navigator.clipboard.write 写入任意数据
  }
 </script>

clipboard.js库

安装

 // node安装
 npm install clipboard --save
 // CDN引入
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

clipboard.js具体的使用方法，可以去看官方文档，我就不详细介绍了。document.execCommand官方已经放弃它了，所以我们在日后的开发中也应该尽量避免使用这个API，而尽量使用 Clipboard 这个API，当然最推荐clipboard.js。

avatar
文章
阅读
粉丝