如何用JavaScript实现网页内容的复制功能？

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

目录+引言+方式一：Async Clipboard API+方式二：Document.execCommand API+复制 DOM 元素内容+复制 input 元素内容+方法三：覆盖 copy 事件+目前有许多第三方插件能实现 copy 功能，但若要我实现，需考虑以下步骤：

目录

• 引言
• 方式一：Async Clipboard API
• 方式二：Document.execCommand API
• 复制 DOM 元素内容
• 复制 input 元素内容
• 方法三：覆写 copy 事件

引言

现在有很多第三方插件能够实现 copy 功能，但如果让我们自己去做，我们知道如何去实现吗？

这篇文章介绍三种实现方案。

方式一：Async Clipboard API

使用 Async Clipboard API

这种方式使用起来最简单，但兼容性不太好，而且要求比较多。

示例代码：

const promise = navigator.clipboard.writeText(newClipText);

需要注意，方法的返回值是个 Promise。并且使用此方法时，页面必须处于 focus 状态，否则会报错。