实现前端点击按钮自动复制剪贴板功能

最新推荐文章于 2025-09-16 09:40:05 发布

原创最新推荐文章于 2025-09-16 09:40:05 发布 · 3.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

项目中实现点击复制按钮将信息复制到剪贴板功能时，异步 Clipboard API 虽强大但兼容性不佳，会出现点击报错问题。因此介绍两种方法，一是异步 Clipboard API，操作异步、可复制任意内容但安全限制多；二是 Document.execCommand()，传统方法，各浏览器都支持。

前言

项目中遇到点击复制按钮，将信息复制到剪贴板的功能。于是直接网上冲浪一圈，直接使用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')，选中的文本就会进入剪贴板。

当需要选中的内容是文本输入标签(input、textarea)
如果是文本输入标签，标签不可以赋予disable或者readonly，这会影响select()方法。

const inputElement = document.querySelector('#input');

inputElement.select();

document.execCommand('copy');

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

总结

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