当前位置：首页 > JavaScript

js 实现粘贴

2026-02-01 15:40:39JavaScript

使用 `document.execCommand` 实现粘贴（传统方法）

通过 document.execCommand('paste') 触发粘贴操作。此方法已逐渐被现代 API 取代，但在某些旧版浏览器中仍可使用。

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'v') {
    document.execCommand('paste');
  }
});

使用 Clipboard API 读取剪贴板内容

现代浏览器推荐使用 Clipboard API 的 navigator.clipboard.readText() 方法读取剪贴板文本内容。需注意浏览器权限限制。

js 实现粘贴

navigator.clipboard.readText()
  .then(text => {
    console.log('粘贴内容:', text);
  })
  .catch(err => {
    console.error('无法读取剪贴板:', err);
  });

监听粘贴事件并获取数据

通过监听 paste 事件，从 event.clipboardData 获取剪贴板内容。支持文本和文件粘贴。

document.addEventListener('paste', (e) => {
  const clipboardData = e.clipboardData || window.clipboardData;
  const pastedText = clipboardData.getData('text');
  console.log('粘贴的文本:', pastedText);

  // 处理文件粘贴（如图片）
  if (clipboardData.files.length > 0) {
    const file = clipboardData.files[0];
    console.log('粘贴的文件:', file.name);
  }
});

实现自定义粘贴板（安全沙箱场景）

在无法直接访问系统剪贴板时（如某些安全沙箱），可通过临时存储区域模拟粘贴功能。

js 实现粘贴

let tempClipboard = null;

// 模拟复制
document.addEventListener('copy', (e) => {
  if (tempClipboard) {
    e.clipboardData.setData('text/plain', tempClipboard);
    e.preventDefault();
  }
});

// 模拟粘贴
function simulatePaste() {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.focus();
  document.execCommand('paste');
  const pastedValue = input.value;
  document.body.removeChild(input);
  return pastedValue;
}

处理富文本粘贴

如需保留富文本格式（如 HTML），可通过 getData('text/html') 获取带格式内容。

document.addEventListener('paste', (e) => {
  const html = e.clipboardData.getData('text/html');
  if (html) {
    console.log('富文本内容:', html);
  }
});

权限请求最佳实践

浏览器可能要求用户授权剪贴板访问权限。通过 Permissions API 可检查当前权限状态。

navigator.permissions.query({ name: 'clipboard-read' })
  .then(result => {
    if (result.state === 'granted') {
      console.log('已有剪贴板权限');
    } else {
      console.log('需请求权限');
    }
  });