独孤那点事儿 - 2023年10月
type: channel
link: http://sanplit.cn/2023/10/
description: 希望你能够坚强又不失勇敢，期盼你不断辉煌又不缺榜样。
items: Web应用实现读取写入剪贴板功能几种方式

Web应用实现读取写入剪贴板功能几种方式
type: item
date: 2023-10-19T19:09:00+08:00
description: Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。参考: https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardClipboard API 包括两个主要的接口：Clipboard 和 DataTransfer。Clipboard 接口用于操作系统剪贴板（例如 Windows 或 macOS 中的剪贴板），它包含以下方法：writeText(text: string): Promise：将文本复制到剪贴板。readText():Promise：从剪贴板读取文本。以下示例可直接使用，亲测有效1、以下是一个使用 Clipboard 接口将文本剪贴板复制粘贴的示例：更多参考 2、实例Clipboard对象，使用html标签 data-clipboard-target ，需要点击触发。 独孤那点事儿 复制 I am text： 12345678 无感触发复制粘贴效果: 创建一个textarea元素，将要写入的内容放入textarea里，然后选择input，再调用浏览器的复制命令，将textarea里的内容复制，最后隐藏或移除textarea。 注: 1、调用 navigator.clipboard 的 API 必须是 https安全协议 访问，否则浏览器将不会暴露出该 API 调用时会报错失败，其次如果想访问剪切板的内容的话，需要两个条件: 第一必须是活动界面也就是说如果你切换到其他界面时，在访问原本界面的剪切板信息将不会执行;第二必须用户开启访问剪切板权限，否则不给访问。结合这些用户操作的安全性也得到了大大地提升~ 2、报错 DOMException: Document is not focused.这是浏览器的安全控制，需要用户主动触发;