js实现复制 粘贴功能
实现复制功能
使用 document.execCommand('copy') 方法实现复制功能。该方法已被现代浏览器弃用，但在某些场景下仍可使用。更推荐使用 Clipboard API。
function copyText(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 copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('文本已复制到剪贴板');
} catch (err) {
console.error('无法复制文本: ', err);
}
}实现粘贴功能
使用 Clipboard API 读取剪贴板内容：
async function pasteText() {
try {
const text = await navigator.clipboard.readText();
console.log('粘贴的文本:', text);
return text;
} catch (err) {
console.error('无法读取剪贴板内容: ', err);
}
}处理权限问题
Clipboard API 需要用户授权才能访问剪贴板。在页面加载时请求权限：
async function requestClipboardPermission() {
try {
const { state } = await navigator.permissions.query({
name: 'clipboard-read'
});
if (state === 'granted' || state === 'prompt') {
console.log('剪贴板访问权限已授予');
}
} catch (err) {
console.error('权限请求失败:', err);
}
}兼容性处理
对于不支持 Clipboard API 的旧浏览器，回退到 document.execCommand 方法：
async function copyTextWithFallback(text) {
try {
await navigator.clipboard.writeText(text);
} catch (err) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
}事件监听示例
监听按钮点击事件触发复制操作：
document.getElementById('copyButton').addEventListener('click', () => {
const textToCopy = document.getElementById('textToCopy').value;
copyText(textToCopy);
});监听粘贴事件：
document.getElementById('pasteArea').addEventListener('paste', async (event) => {
const pastedText = await pasteText();
event.target.value = pastedText;
event.preventDefault();
});安全注意事项
剪贴板访问涉及用户隐私，浏览器会限制未授权的访问。确保在用户交互（如点击事件）中触发剪贴板操作，避免页面加载时自动访问剪贴板。
对于敏感内容，考虑添加确认对话框：
document.getElementById('copyButton').addEventListener('click', async () => {
if (confirm('确定要复制此内容吗？')) {
await copyText(textToCopy);
}
});
