js实现复制粘贴
实现复制文本到剪贴板
使用 document.execCommand 方法（已废弃但仍有广泛支持）：
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}使用现代 Clipboard API（推荐）：
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('文本已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
}
}实现从剪贴板粘贴文本
使用 Clipboard API 读取文本：
async function pasteFromClipboard() {
try {
const text = await navigator.clipboard.readText();
console.log('剪贴板内容:', text);
return text;
} catch (err) {
console.error('读取剪贴板失败:', err);
}
}处理权限问题
现代浏览器要求页面处于活动状态（用户点击等交互）才能访问剪贴板：
button.addEventListener('click', async () => {
try {
const permission = await navigator.permissions.query({
name: 'clipboard-read'
});
if (permission.state === 'granted') {
const text = await pasteFromClipboard();
// 处理粘贴的文本
}
} catch (error) {
console.error('权限请求失败:', error);
}
});兼容性处理
检测浏览器支持情况：
function isClipboardAPISupported() {
return !!navigator.clipboard &&
typeof navigator.clipboard.writeText === 'function' &&
typeof navigator.clipboard.readText === 'function';
}
if (!isClipboardAPISupported()) {
// 回退到传统方法
document.getElementById('copyBtn').onclick = function() {
copyToClipboardLegacy('要复制的文本');
};
}实际应用示例
复制按钮点击事件：
document.getElementById('copyBtn').addEventListener('click', () => {
const textToCopy = document.getElementById('textInput').value;
copyToClipboard(textToCopy);
});粘贴按钮点击事件：
document.getElementById('pasteBtn').addEventListener('click', async () => {
const pastedText = await pasteFromClipboard();
document.getElementById('output').value = pastedText;
});注意事项
- 现代 Clipboard API 需要 HTTPS 环境或 localhost
- 某些浏览器可能限制对剪贴板的访问
- 用户可能需要明确授权才能访问剪贴板内容
- 考虑为不支持新API的浏览器提供备用方案
