当前位置：首页 > JavaScript

js实现粘贴功能

2026-04-04 03:31:18JavaScript

使用 Clipboard API 实现粘贴功能

现代浏览器提供了 Clipboard API 支持剪贴板操作。通过 navigator.clipboard.readText() 可以读取剪贴板文本内容。

document.getElementById('pasteButton').addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText();
    document.getElementById('output').value = text;
  } catch (err) {
    console.error('Failed to read clipboard: ', err);
  }
});

兼容旧浏览器的实现方案

对于不支持 Clipboard API 的浏览器，可以使用 document.execCommand('paste') 方法，但需要配合可编辑元素使用。

document.getElementById('pasteButton').addEventListener('click', () => {
  const tempInput = document.createElement('textarea');
  document.body.appendChild(tempInput);
  tempInput.focus();

  try {
    const success = document.execCommand('paste');
    if (success) {
      document.getElementById('output').value = tempInput.value;
    }
  } catch (err) {
    console.error('Failed to paste: ', err);
  }

  document.body.removeChild(tempInput);
});

监听粘贴事件

直接监听元素的 paste 事件可以获取用户粘贴的内容，无需主动调用 API。

document.getElementById('inputField').addEventListener('paste', (e) => {
  const pastedData = e.clipboardData.getData('text/plain');
  console.log('Pasted content: ', pastedData);
  // 处理粘贴内容
});

安全注意事项

浏览器对剪贴板访问有严格限制：

需要用户主动触发（如点击事件）
HTTPS 环境下或 localhost 才可用
某些浏览器需要明确权限

完整示例代码

<textarea id="output"></textarea>
<button id="pasteButton">粘贴文本</button>

<script>
  document.getElementById('pasteButton').addEventListener('click', async () => {
    try {
      const text = await navigator.clipboard.readText();
      document.getElementById('output').value = text;
    } catch (err) {
      alert('无法访问剪贴板，请检查浏览器权限或尝试手动粘贴');
      console.error(err);
    }
  });
</script>

处理富文本内容

如需处理 HTML 等富文本内容，可以使用 getData('text/html')：

js实现粘贴功能

element.addEventListener('paste', (e) => {
  const htmlContent = e.clipboardData.getData('text/html');
  const plainContent = e.clipboardData.getData('text/plain');
  // 根据需要处理不同格式
});