如何在浏览器中获取剪切板中的内容?
解释了如何通过 JavaScript 获取浏览器的剪切板内容,包括 paste 事件和 navigator.clipboard API 的使用。
在前端开发中获取剪贴板内容主要通过 JavaScript 实现,常用方法如下:
- 监听粘贴事件
使用paste
事件获取用户粘贴时的剪切板数据。示例代码:document.addEventListener('paste', (event) => { const clipboardData = event.clipboardData || window.clipboardData; const text = clipboardData.getData('text/plain'); console.log('粘贴内容:', text); });
- 主动读取剪切板 (现代浏览器)
使用navigator.clipboard.readText()
方法直接获取文本内容 (需安全上下文与用户授权)。示例代码:navigator.clipboard.readText() .then(text => console.log('剪切板文本:', text)) .catch(err => console.error('获取失败:', err));
注意事项:
readText()
要求 HTTPS 环境- 首次调用需用户授权(浏览器会弹出提示)
- 兼容性:Chrome 66+/Firefox 63+/Edge 79+