一键复制粘贴
一鍵復(fù)制粘貼功能需要用到一個(gè)輕量級的JS插件：clipboard.js。
官網(wǎng)地址：https://clipboardjs.com
下載到本地后，將其放入項(xiàng)目中，直接引用即可。具體實(shí)現(xiàn)代碼如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>一鍵復(fù)制粘貼</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">一鍵復(fù)制</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">一鍵復(fù)制</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(); //選中需要復(fù)制的內(nèi)容alert("復(fù)制成功！");});clipboard.on('error', function(e) {alert("當(dāng)前瀏覽器不支持此功能，請手動復(fù)制。")});}function copy2() {var clipboard = new Clipboard('#copy_wx');clipboard.on('success', function(e) {e.clearSelection(); //選中需要復(fù)制的內(nèi)容alert("復(fù)制成功！");});clipboard.on('error', function(e) {alert("當(dāng)前瀏覽器不支持此功能，請手動復(fù)制。")});}</script></html>?
?
?
后續(xù)補(bǔ)充：
?????? 在復(fù)制粘貼時(shí)，第二次點(diǎn)擊就會彈出兩次復(fù)制成功，第三次點(diǎn)擊就會彈出三次，原因是每次點(diǎn)擊后執(zhí)行實(shí)例化一個(gè)clipboard對象，之前的clipboard對象并沒有銷毀，所以就會彈出多次。解決方法是：每次使用完成后銷毀clipboard對象，這樣既能解決現(xiàn)在的問題，也可以釋放內(nèi)存，優(yōu)化代碼。代碼如下：無論復(fù)制成功或失敗，都需要clipboard.destroy()。
function copy1() {var clipboard = new Clipboard('#copy_zfb');clipboard.on('success', function(e) {e.clearSelection(); //選中需要復(fù)制的內(nèi)容alert("復(fù)制成功！");clipboard.destroy();});clipboard.on('error', function(e) {alert("當(dāng)前瀏覽器不支持此功能，請手動復(fù)制。")clipboard.destroy();});}?注意：如果你在項(xiàng)目中使用了其他的前端框架或者插件，有可能會與clipboard.js插件產(chǎn)生沖突。解決方法，可以使用<iframe/>標(biāo)簽，將此部分代碼放在一個(gè)新的html文件中，然后在主文件中使用<iframe/>標(biāo)簽引入。
本人為JS實(shí)習(xí)生一枚，不斷學(xué)習(xí)，不斷進(jìn)步，歡迎各位前輩批評指教。
總結(jié)
- 上一篇： NT平台ADSL拨号连接密码恢复原理
- 下一篇： 巴比特观察 | NFT朋克热潮：Cryp