如何实现JavaScript剪贴板交互_Clipboard API如何使用

admin 百科 2025-12-23 14

JavaScript剪贴板交互主要通过Clipboard API实现，需用户手势触发且要求HTTPS；writeText()和readText()用于纯文本读写，返回Promise；富文本或图片需用write()/read()配合ClipboardItem；现代浏览器广泛支持但存在兼容性差异。

如何实现JavaScript剪贴板交互_Clipboard API如何使用-第1张图片-佛山资讯网

JavaScript 中的剪贴板交互现在主要通过 Clipboard API 实现，它比旧的 document.execCommand('copy') 更安全、更可控，且无需依赖输入框或选中内容。核心是 navigator.clipboard 对象，但需注意权限和使用场景。

基础用法：复制文本到剪贴板

调用 navigator.clipboard.writeText() 即可写入纯文本。该方法返回 Promise，成功则无返回值，失败会抛出错误。

必须在用户手势（如点击、键盘事件）触发的上下文中调用，否则浏览器会拒绝（例如不能在页面加载时直接执行）
页面需为 HTTPS（本地开发环境 localhost 也允许）
示例：

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('Hello, Clipboard!');
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
});

读取剪贴板中的文本

使用 navigator.clipboard.readText() 获取当前剪贴板文本内容，同样返回 Promise。

需要用户主动触发（如点击“粘贴”按钮），不能自动读取
部分浏览器（如 Safari）可能要求额外权限或仅支持安全上下文下的显式请求
注意：读取操作可能被用户拒绝，务必处理 Promise rejection

读写富文本或图片（进阶）

writeText() 和 readText() 只处理纯文本。如需复制 HTML、图片等，需用更底层的 write() 和 read() 方法。

标签： javascript java html 浏览器 edge safari ai 开发环境键盘事件 canva

本文地址： https://www.fsgp.cn/p/baike/90415.html