首页js点击复制到粘贴板

js点击复制到粘贴板

时间: 2024-07-10 21:01:17 浏览: 209

在JavaScript中，实现点击按钮快速复制文本到剪贴板的功能通常会利用`clipboard.writeText()`方法。以下是一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Copy to Clipboard</title> </head> <body> <button onclick="copyToClipboard('Hello, World!')">复制到剪贴板</button> <script> function copyToClipboard(text) { if (window.clipboardWriteText) { // 判断浏览器是否支持该API navigator.clipboard.writeText(text) .then(function() { alert('复制成功！'); }) .catch(function(err) { console.error('复制失败：', err); }); } else if (document.queryCommandSupported && document.queryCommandEnabled) { // 兼容旧浏览器 const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.left = '-9999px'; // 隐藏输入框 document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); // 使用DOM操作模拟复制 document.body.removeChild(textarea); alert('复制成功！'); } } </script> </body> </html> ``` 在这个示例中，当用户点击"复制到剪贴板"按钮时，会尝试将文本字符串`'Hello, World!'`复制到剪贴板。如果浏览器支持新的`navigator.clipboard` API，就直接使用它；如果不支持，则创建一个临时隐藏的`<textarea>`元素，选中文本并执行复制命令。

阅读全文