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);
  }
});