前言

项目中遇到点击复制按钮,将信息复制到剪贴板的功能。于是直接网上冲浪一圈,直接使用Clipboard API解决了。在测试的过程中,给我提了个复制按钮点击报错的Bug,可是在我本地没有任何问题,在网上仔细查看发现Clipboard API虽然很强大,甚至可以复制图片到剪切板,但是兼容性那可就不太友好了,毕竟没有十全十美的技术。
于是只好再添加一种兼容性比较好document.execCommand()的方法了。
下面我们就简单介绍下这两种方法


一、异步 Clipboard API

Clipboard API 是下一代的剪贴板操作方法,比传统的document.execCommand()方法更强大、更合理。

它的所有操作都是异步的,返回 Promise 对象,不会造成页面卡顿。而且,它可以将任意内容(比如图片)放入剪贴板。

navigator.clipboard属性返回 Clipboard 对象,所有操作都通过这个对象进行。

const clipboardObj = navigator.clipboard;

clipboardObj.writeText(value); // value 是添加到剪切板的内容

如果navigator.clipboard属性返回undefined,就说明当前浏览器不支持这个 API。
由于用户可能把敏感数据(比如密码)放在剪贴板,允许脚本任意读取会产生安全风险,所以这个 API 的安全限制比较多。
首先,Chrome 浏览器规定,只有 HTTPS 协议的页面才能使用这个 API。不过,开发环境(localhost)允许使用非加密协议。

二、Document.execCommand()

Document.execCommand()是操作剪贴板的传统方法,各种浏览器都支持。
复制时,先选中文本,然后调用document.execCommand('copy'),选中的文本就会进入剪贴板。

  • 当需要选中的内容是文本输入标签(inputtextarea)
    如果是文本输入标签,标签不可以赋予disable或者readonly,这会影响select()方法。
const inputElement = document.querySelector('#input');

inputElement.select();

document.execCommand('copy');
  • 当需要选中的内容不是文本输入标签(inputtextarea)
    需要主动创建一个可输入文本的标签(input和textarea)然后将待复制的文本赋值给这个标签,再调用.select()方法选中这个标签才能继续执行document.execCommand('copy')去复制。

总结

参考链接:https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐