碎片时间学编程「12」:如何使用 JavaScript 将文本复制到剪贴板...

发布网友发布时间：2024-09-17 03:45

共1个回答

热心网友时间：2024-10-25 11:41

异步剪贴板 API

使用异步剪贴板 API 可以轻松地在现代浏览器中实现将文本复制到剪贴板的功能。此 API 在所有现代浏览器中都得到支持，并提供了一种简单且安全的方式来更新剪贴板的内容。实现方法主要是确保 `Navigator`, `Navigator.clipboard`, 和 `Navigator.clipboard.writeText` 可用，并调用 `Clipboard.writeText()` 将值复制到剪贴板。在遇到任何问题时，使用 `Promise.reject()` 返回一个立即拒绝的 Promise，以保持返回类型一致。

Document.execCommand('复制')

当需要支持老旧浏览器时，可以考虑使用 `Document.execCommand('copy')` 方法。这需要执行以下步骤：

创建一个要附加到文档的元素，将其值设置为要复制到剪贴板的字符串。
将元素附加到当前 HTML 文档，并使用 CSS 将其隐藏，以防止闪烁。
使用 `HTMLInputElement.select()` 选择元素的内容。
调用 `Document.execCommand('copy')` 将内容复制到剪贴板。
从文档中删除元素。

请记住，此方法仅在用户操作结果（例如在 click 事件侦听器内部）时有效，这取决于 `Document.execCommand()` 的工作方式。

在实施过程中，还需考虑其他因素，如恢复用户在文档上的先前选择，这可以通过 JavaScript 轻松处理。在后续文章中，您将学习到具有这些改进的最终代码。

欲了解更多学习内容，请访问我的网站： icoderoad.com