當前位置：
首頁 >
一键复制粘贴
發布時間：2023/12/14
47
豆豆
一鍵復制粘貼功能需要用到一個輕量級的JS插件：clipboard.js。
官網地址：https://clipboardjs.com
下載到本地后，將其放入項目中，直接引用即可。具體實現代碼如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>一鍵復制粘貼</title><style>.transfer {width: 90%;margin: 20px auto;font-size: 18px;}.transfer button {margin-top: -5px;float: right;margin-left: 10px;background-color: rgb(3, 169, 244);width: 30%;height: 25px;font-size: 14px;color: white;border: 0;border-radius: 8%;}</style></head><body><div class="transfer">支付寶：<span id="zfb_account">11111111111</span><button onclick="copy1()" data-clipboard-action="copy" data-clipboard-target="#zfb_account" id="copy_zfb">一鍵復制</button></div><div class="transfer">微信：<span id="wx_account">2222222</span><button onclick="copy2()" data-clipboard-action="copy" data-clipboard-target="#wx_account" id="copy_wx">一鍵復制</button></div><input type="text" /></body><script type="text/javascript" src="../js/clipboard.min.js"></script><script>function copy1() {var clipboard = new Clipboard('#copy_zfb');clipboard.on('success', function(e) {e.clearSelection(); //選中需要復制的內容alert("復制成功！");});clipboard.on('error', function(e) {alert("當前瀏覽器不支持此功能，請手動復制。")});}function copy2() {var clipboard = new Clipboard('#copy_wx');clipboard.on('success', function(e) {e.clearSelection(); //選中需要復制的內容alert("復制成功！");});clipboard.on('error', function(e) {alert("當前瀏覽器不支持此功能，請手動復制。")});}</script></html>?
?
?
后續補充：
?????? 在復制粘貼時，第二次點擊就會彈出兩次復制成功，第三次點擊就會彈出三次，原因是每次點擊后執行實例化一個clipboard對象，之前的clipboard對象并沒有銷毀，所以就會彈出多次。解決方法是：每次使用完成后銷毀clipboard對象，這樣既能解決現在的問題，也可以釋放內存，優化代碼。代碼如下：無論復制成功或失敗，都需要clipboard.destroy()。
function copy1() {var clipboard = new Clipboard('#copy_zfb');clipboard.on('success', function(e) {e.clearSelection(); //選中需要復制的內容alert("復制成功！");clipboard.destroy();});clipboard.on('error', function(e) {alert("當前瀏覽器不支持此功能，請手動復制。")clipboard.destroy();});}?注意：如果你在項目中使用了其他的前端框架或者插件，有可能會與clipboard.js插件產生沖突。解決方法，可以使用<iframe/>標簽，將此部分代碼放在一個新的html文件中，然后在主文件中使用<iframe/>標簽引入。
本人為JS實習生一枚，不斷學習，不斷進步，歡迎各位前輩批評指教。
總結
- 上一篇： NT平台ADSL拨号连接密码恢复原理
- 下一篇： 巴比特观察 | NFT朋克热潮：Cryp