答案：html5的Clipboard API可通过javaScript实现安全复制。需用户点击触发，在https或localhost环境下，调用navigator.clipboard.writeText()写入文本，配合try–catch处理错误，并为不支持的浏览器降级使用execCommand。
在现代网页开发中，实现复制功能可以极大提升用户体验。html5 提供了 Clipboard API，让开发者可以直接通过 javascript 与系统剪贴板交互，实现文本的复制和粘贴操作。本文将介绍如何使用 HTML5 的剪贴板 API 实现复制功能。
Clipboard API 简介
Clipboard API 是一套基于 promise 的接口，允许网页安全地读取和写入剪贴板内容。它取代了过去依赖 document.execCommand(‘copy’) 的旧方法，更加安全、灵活且符合现代标准。
主要方法包括：
- navigator.clipboard.writeText()：向剪贴板写入文本
- navigator.clipboard.readText()：从剪贴板读取文本
该 API 受浏览器安全策略限制，通常需要用户手势（如点击）触发，并且页面需运行在 HTTPS 或 localhost 环境下。
立即学习“前端免费学习笔记（深入）”；
实现复制功能的基本步骤
以下是一个简单的复制功能实现示例：
<button id="copyBtn">复制文本</button> <p id="textToCopy">这是一段要被复制的文字</p> <script> document.getElementById('copyBtn').addEventListener('click', async () => { const text = document.getElementById('textToCopy').innerText; try { await navigator.clipboard.writeText(text); alert('已复制到剪贴板'); } catch (err) { console.error('复制失败:', err); alert('复制失败，请重试'); } }); </script>
说明：
兼容性与降级处理
并非所有浏览器都完全支持新的 Clipboard API。为确保兼容性，可添加 fallback 方案：
async function copyText(text) { if (navigator.clipboard && window.isSecureContext) { // 使用现代 API try { await navigator.clipboard.writeText(text); return true; } catch (err) { console.error('Clipboard API 失败:', err); return false; } } else { // 降级到 execCommand（旧方法） const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = 0; document.body.appendChild(textarea); textarea.select(); const success = document.execCommand('copy'); document.body.removeChild(textarea); return success; } } // 调用方式 document.getElementById('copyBtn').addEventListener('click', async () => { const text = document.getElementById('textToCopy').innerText; const result = await copyText(text); if (result) { alert('复制成功'); } else { alert('复制失败'); } });
注意：execCommand 已废弃，仅建议作为兼容方案使用。
安全与权限注意事项
- Clipboard API 必须在安全上下文中使用（HTTPS 或 localhost）
- 写入剪贴板的操作必须由用户主动行为（如点击）触发
- 某些浏览器会提示用户授权剪贴板访问权限
- 避免频繁调用，防止被浏览器拦截
基本上就这些。掌握 Clipboard API 后，你可以轻松为网页添加高效、安全的复制功能，提升交互体验。不复杂但容易忽略的是权限和环境要求，开发时务必注意。