如何用JavaScript实现网页的剪切、复制、粘贴功能？

本文共计693个文字，预计阅读时间需要3分钟。

针对现代浏览器实现（Navigator.clipboard）的API，可以用来访问系统剪贴板，实现[剪切、复制、粘贴]功能。该API被设计用来替代document.execCommand()的剪贴板访问方式。

针对现代浏览器实现（Navigator.clipboard）

Navigator.clipboard API可以用来访问系统剪贴板，可以实现功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式，不兼容 IE。

使用 Navigator.clipboard API时会弹出用户授权弹窗。如果用户没有授予权限，则不允许读取或更改剪贴板内容。

let clipBoard = navigator.clipboard; // 写入文本至操作系统剪贴板 clipBoard.writeText('你好').then(() => { this.$message.success('复制成功！') }) // 写入任意数据（比如图片）至操作系统剪贴板用 clipBoard.write() // 从剪贴板读取文本 clipBoard.readText().then(clipText => { console.log(clipText); }) // 从剪贴板读取数据（比如图片）用 clipBoard.read()

针对旧版本浏览器实现（document.execCommand）
document.execCommand 针对可编辑内容区域提供了很多有用的 API，包括其中的功能。

MDN 写到 document.execCommand 方法已废弃。