当前位置：首页 > JavaScript

js实现复制粘贴功能

2026-04-04 07:33:44JavaScript

实现复制功能

使用 document.execCommand('copy') 方法实现复制功能。该方法已被现代浏览器弃用，但在某些场景下仍可使用。

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('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
}

实现粘贴功能

使用 Clipboard API 的 readText() 方法获取剪贴板中的文本内容。

js实现复制粘贴功能

async function pasteFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted text: ', text);
    return text;
  } catch (err) {
    console.error('Failed to read from clipboard: ', err);
  }
}

处理权限问题

Clipboard API 需要用户授权才能访问剪贴板内容。在尝试读取剪贴板时，浏览器会提示用户授予权限。

async function checkClipboardPermission() {
  const permissionStatus = await navigator.permissions.query({
    name: 'clipboard-read'
  });
  return permissionStatus.state;
}

兼容性处理

对于不支持 Clipboard API 的旧浏览器，可以回退到 document.execCommand('paste') 方法，但这种方法有较大限制。

js实现复制粘贴功能

function legacyPaste() {
  const textarea = document.createElement('textarea');
  document.body.appendChild(textarea);
  textarea.focus();
  const success = document.execCommand('paste');
  const text = textarea.value;
  document.body.removeChild(textarea);
  return success ? text : null;
}

事件监听

可以监听粘贴事件来获取用户粘贴的内容。

document.addEventListener('paste', (event) => {
  const pastedText = event.clipboardData.getData('text');
  console.log('Pasted text: ', pastedText);
});