当前位置：首页 > JavaScript

js 实现粘贴

2026-04-06 08:32:07JavaScript

监听粘贴事件

使用 addEventListener 监听 paste 事件，触发时获取剪贴板内容：

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

获取剪贴板图片数据

通过 clipboardData.items 遍历剪贴板项，识别图片类型并转换为 Base64：

js 实现粘贴

document.addEventListener('paste', (event) => {
  const items = (event.clipboardData || event.originalEvent.clipboardData).items;
  for (let item of items) {
    if (item.type.indexOf('image') !== -1) {
      const blob = item.getAsFile();
      const reader = new FileReader();
      reader.onload = (e) => {
        console.log('图片Base64:', e.target.result);
      };
      reader.readAsDataURL(blob);
    }
  }
});

自定义粘贴处理

阻止默认粘贴行为，实现自定义处理逻辑：

js 实现粘贴

document.addEventListener('paste', (event) => {
  event.preventDefault();
  const text = event.clipboardData.getData('text/plain');
  document.execCommand('insertText', false, text.toUpperCase());
});

安全限制说明

现代浏览器对剪贴板访问有安全限制：

需用户主动触发（如点击事件）
HTTPS 环境下或 localhost 才可用

部分 API 需要权限请求：

navigator.permissions.query({ name: 'clipboard-read' }).then(result => {
if (result.state === 'granted') {
  // 允许访问
}
});

兼容性处理

针对旧版 IE 浏览器添加兼容代码：

function handlePaste() {
  const text = window.clipboardData.getData('Text');
  // IE处理逻辑
}
if (window.clipboardData) {
  document.attachEvent('onpaste', handlePaste);
}

标签: js