当前位置：首页 > JavaScript

js代码实现粘贴

2026-02-02 13:58:26JavaScript

监听粘贴事件

使用addEventListener监听paste事件，该事件在用户执行粘贴操作时触发。通过事件对象可以获取剪贴板内容。

document.addEventListener('paste', (event) => {
  const clipboardData = event.clipboardData || window.clipboardData;
  const pastedText = clipboardData.getData('text');
  console.log('粘贴内容:', pastedText);
});

读取剪贴板文本

通过navigator.clipboard.readText()异步读取剪贴板中的纯文本内容。需要浏览器权限，通常在用户交互后调用。

js代码实现粘贴

async function getClipboardText() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('剪贴板文本:', text);
    return text;
  } catch (err) {
    console.error('无法读取剪贴板:', err);
  }
}

读取剪贴板HTML

对于富文本内容，使用getData('text/html')获取HTML格式数据。需在paste事件处理程序中调用。

document.addEventListener('paste', (event) => {
  const html = event.clipboardData.getData('text/html');
  console.log('HTML内容:', html);
});

写入剪贴板

使用navigator.clipboard.writeText()将文本写入剪贴板。需要用户授权，通常在点击事件中触发。

js代码实现粘贴

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

安全限制处理

现代浏览器对剪贴板访问有严格限制。解决方案包括：

在用户交互事件（如点击）中触发剪贴板操作
使用try-catch处理权限拒绝情况
对于跨域iframe，需添加allow="clipboard-read; clipboard-write"属性

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('要复制的文本');
  } catch (err) {
    console.error('请手动复制:', err);
    const textarea = document.createElement('textarea');
    textarea.value = '要复制的文本';
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
});

兼容性处理

对于旧版浏览器，回退到document.execCommand方法。注意该方法已废弃，应优先使用Clipboard API。

function fallbackCopyText(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  const success = document.execCommand('copy');
  document.body.removeChild(textarea);
  return success;
}