方案一 ： 可满足大部分浏览器正常使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>copy example</title> </head> <body> <p> <button class="copy">Copy</button> </p> <p> <textarea cols="50" rows="10" placeholder="这这里粘贴试一下吧!"></textarea> </p> <script> var copyBtn = document.querySelector('.copy') // 点击的时候调用 copyTextToClipboard() 方法就好了. copyBtn.onclick = function() { copyTextToClipboard('随便复制点内容试试') } function copyTextToClipboard(text) { var textArea = document.createElement("textarea") textArea.style.position = 'fixed' textArea.style.top = 0 textArea.style.left = 0 textArea.style.width = '2em' textArea.style.height = '2em' textArea.style.padding = 0 textArea.style.border = 'none' textArea.style.outline = 'none' textArea.style.boxShadow = 'none' textArea.style.background = 'transparent' textArea.value = text document.body.appendChild(textArea) textArea.select() try { var msg = document.execCommand('copy') ? '成功' : '失败' alert('复制内容 ' + msg); } catch (err) { alert('不能使用这种方法复制内容'); } document.body.removeChild(textArea) } </script> </body> </html>
方案二： 兼容苹果 iphone js 复制功能 clipboard.js
下载地址： https://github.com/zenorocha/clipboard.js
<script src="你的路径clipboard.min.js"></script> <textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> 代码改变世界 </textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar"> Cut to clipboard </button> <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); alert("复制成功"); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); </script>