js實(shí)現(xiàn)復(fù)制粘貼的兩種方法
本文實(shí)例為大家分享了js實(shí)現(xiàn)復(fù)制粘貼的具體代碼，供大家參考，具體內(nèi)容如下
一、前沿
界面需要復(fù)制功能，所以就寫(xiě)了一個(gè)作為簡(jiǎn)單記錄
二、方法、推薦第二種。
1、第一種方法
1）、通過(guò) document.execCommand(’copy’)2）、前端代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>constructor-nodelist</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' /></head><body><button onclick='copyText(’copy_file’)'>點(diǎn)我復(fù)制</button><a href='http://m.cgvv.com.cn/bcjs/復(fù)制內(nèi)容' ></a><script type='text/javascript' src='https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js'></script><script>function copyText(str_file) { const btn = document.querySelector(’.’+str_file); var copy_val = document.getElementById(str_file) var copy_file = copy_val.getAttribute('href'); btn.addEventListener(’click’,() => { const input = document.createElement(’input’); document.body.appendChild(input); input.setAttribute(’value’, copy_file); input.select(); if (document.execCommand(’copy’)) { document.execCommand(’copy’); swal('復(fù)制成功！','success'); } document.body.removeChild(input); })}</script></body>
3）、總結(jié)：主要是通過(guò) class和id 來(lái)復(fù)制 a標(biāo)簽中的 href，把復(fù)制好的內(nèi)容放到 生成的input標(biāo)簽中，然后復(fù)制結(jié)束把 input標(biāo)簽給remove，這個(gè)你復(fù)制內(nèi)容自行發(fā)揮，和修改 js。4）、問(wèn)題：第一次點(diǎn)擊不生效，需要點(diǎn)擊兩次，暫時(shí)不解決
2、第二種方法
1）、通過(guò) ClipboardJS 來(lái)實(shí)現(xiàn) 內(nèi)容的復(fù)制，推薦這個(gè)2）、git地址：clipboardjs3）、前端代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <!-- 請(qǐng)自行去git項(xiàng)目下載 js--> <script src='http://m.cgvv.com.cn/bcjs/clipboard.min.js'></script> <link rel='stylesheet' /> <script type='text/javascript' src='https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js'></script></head><body><button data-clipboard-text='str_555' onclick='copyText()'> <span>Copy</span></button></body></html><script>function copyText() { var btn = document.getElementById(’btn’); console.log(btn); var clipboard = new ClipboardJS(btn);<!-- var clipboard = new ClipboardJS(btn, {--><!-- container: document.getElementById(’btn’)--><!-- });--> 如果你的項(xiàng)目是 bootstrap框架，請(qǐng)使用這個(gè) clipboard.on(’success’, function(e) { console.log(e); swal('復(fù)制成功！','success'); clipboard.destroy(); }); clipboard.on(’error’, function(e) { console.log(e); swal('復(fù)制失敗','error'); clipboard.destroy(); });}</script>
3）、總結(jié)：請(qǐng)一定要仔細(xì)閱讀 文檔。這個(gè)項(xiàng)目還是非常強(qiáng)大的，強(qiáng)烈推薦這個(gè)。
4）、問(wèn)題：也是遇到了 第一次復(fù)制不生效的問(wèn)題，暫時(shí)不解決了。
三、總結(jié)
1、都遇到了 第一次復(fù)制不生效的問(wèn)題，后續(xù)解決把，都采用了 sweetalert 。2、個(gè)人都只在 谷歌和火狐瀏覽器實(shí)驗(yàn)了，都可以用，如果其他瀏覽器版本不能用，請(qǐng)自行查閱其他文章，歡迎溝通、指正。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JS數(shù)據(jù)類(lèi)型判斷的幾種常用方法2. HTML <!DOCTYPE> 標(biāo)簽3. 如何通過(guò)vscode運(yùn)行調(diào)試javascript代碼4. Python pip 常用命令匯總5. XML基本概念XPath、XSLT與XQuery函數(shù)介紹6. Ajax實(shí)現(xiàn)頁(yè)面無(wú)刷新留言效果7. 用Python自動(dòng)下載網(wǎng)站所有文件8. WML語(yǔ)言的基本情況9. 利用CSS制作3D動(dòng)畫(huà)10. ajax post下載flask文件流以及中文文件名問(wèn)題
網(wǎng)公網(wǎng)安備