如何在浏览器中获取剪切板中的内容?

解释了如何通过 JavaScript 获取浏览器的剪切板内容,包括 paste 事件和 navigator.clipboard API 的使用。

DOM操作 中等 JavaScript 剪切板 剪贴板

在前端开发中获取剪贴板内容主要通过 JavaScript 实现,常用方法如下:

  1. 监听粘贴事件
    使用 paste 事件获取用户粘贴时的剪切板数据。示例代码:
    document.addEventListener('paste', (event) => {
      const clipboardData = event.clipboardData || window.clipboardData;
      const text = clipboardData.getData('text/plain');
      console.log('粘贴内容:', text);
    });
    
  2. 主动读取剪切板 (现代浏览器)
    使用 navigator.clipboard.readText() 方法直接获取文本内容 (需安全上下文与用户授权)。示例代码:
    navigator.clipboard.readText()
      .then(text => console.log('剪切板文本:', text))
      .catch(err => console.error('获取失败:', err));
    

    注意事项:

    • readText() 要求 HTTPS 环境
    • 首次调用需用户授权(浏览器会弹出提示)
    • 兼容性:Chrome 66+/Firefox 63+/Edge 79+