JavaScript中BOM对象navigator怎么用clipboardAPI实现一键复制文本到剪贴板-js教程-PHP中文网

navigator.clipboard 是现代浏览器中用于操作剪贴板的 api，属于 bom 一部分但非 navigator 原生属性，需安全上下文（https/localhost），支持 chrome 66+、firefox 63+、ios 13.4+，不支持旧版 ie；复制用 writetext()，读取需 readtext() 及 clipboard-read 权限；应检测兼容性并降级至 execcommand 或临时 textarea 方案。

javascript中bom对象navigator怎么用clipboardapi实现一键复制文本到剪贴板

navigator.clipboard 是现代浏览器中用于操作剪贴板的 API，它属于 BOM（Browser Object Model）的一部分，但注意：它**不是 navigator 对象的原生属性**，而是通过 navigator.clipboard 访问的独立接口，需在安全上下文（HTTPS 或 localhost）中使用。

确认浏览器支持与权限

调用前应检查浏览器是否支持该 API，并确保页面处于安全上下文：

不支持旧版 IE、部分安卓 WebView 或低版本 Safari（iOS 13.4+、Chrome 66+、Firefox 63+ 支持良好）
必须通过 HTTPS 或 localhost 访问，否则 navigator.clipboard 为 undefined
首次写入剪贴板时，浏览器会自动触发权限提示（用户需主动交互后才可调用，如点击按钮）

基本用法：复制纯文本

使用 navigator.clipboard.writeText() 可一键复制字符串：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

// 示例：绑定到按钮点击
document.getElementById('copyBtn').addEventListener('click', () => {
  copyToClipboard('Hello, world!');
});

读取剪贴板内容（需用户授权）

读取需额外权限（clipboard-read），且仅支持文本（readText()）：

调用 navigator.clipboard.readText() 返回 Promise
用户需已授予权限，或首次调用时弹出授权提示
常见于“粘贴内容预览”等场景

async function pasteFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('粘贴内容:', text);
  } catch (err) {
    console.error('读取失败:', err);
  }
}