使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼
背景
本篇文章記錄如何通過js代碼實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能。
分為兩個(gè)部分內(nèi)容:
前兩個(gè)部分使用execCommand方法,該方法現(xiàn)在被棄用(ps:雖然也還可以用就行了), 且對(duì)于單行內(nèi)容的復(fù)制需要結(jié)合input標(biāo)簽實(shí)現(xiàn),多行內(nèi)容的復(fù)制需要結(jié)合textarea標(biāo)簽實(shí)現(xiàn)。
第三個(gè)部分,則是現(xiàn)在使用Clipboard API來實(shí)現(xiàn)單行或多行內(nèi)容的復(fù)制。(推薦方法)
1、execCommand方法
該方法是在document對(duì)象下的方法,現(xiàn)已被棄用,但在這里考慮到以前已經(jīng)使用過這樣的方法實(shí)現(xiàn)復(fù)制功能了,也寫在這里,現(xiàn)在仍然可用。
單行復(fù)制
通過input標(biāo)簽將需要復(fù)制的內(nèi)容傳遞給value屬性,之后通過document對(duì)象下execCommand方法執(zhí)行復(fù)制功能即可。
具體實(shí)現(xiàn)如下:
handleCopy() { let copy_text = '需要復(fù)制的內(nèi)容';//拿到想要復(fù)制的值 let input_dom = document.createElement('input');//創(chuàng)建input元素 input_dom.value = copy_text;//添加需要復(fù)制的內(nèi)容到value屬性 document.body.appendChild(input_dom);//向頁面底部追加輸入框 input_dom.select();//選擇input元素 document.execCommand("Copy");//執(zhí)行復(fù)制命令 alert("復(fù)制成功!");//彈出提示信息,不同組件可能存在寫法不同 //復(fù)制之后再刪除元素,否則無法成功賦值 input_dom.remove();//刪除動(dòng)態(tài)創(chuàng)建的節(jié)點(diǎn) },
上面的方法在頁面需要觸發(fā)復(fù)制功能的時(shí)候添加到對(duì)應(yīng)鼠標(biāo)事件即可。
多行復(fù)制
通過textarea標(biāo)簽將需要復(fù)制的內(nèi)容傳遞給value屬性,并在需要換行的內(nèi)容后面加入換行符\r\n,之后通過document對(duì)象下execCommand方法執(zhí)行復(fù)制功能即可。
具體實(shí)現(xiàn)如下:
handleCopy() { let copy_text = '第一行需要復(fù)制的內(nèi)容\r\n第二行需要復(fù)制的內(nèi)容';//拿到想要復(fù)制的值 let textarea_dom = document.createElement('textarea');//創(chuàng)建textarea元素 document.body.appendChild(textarea_dom);//向頁面底部追加輸入框 textarea_dom.value = copy_text; //添加需要復(fù)制的內(nèi)容到value屬性 textarea_dom.select();//選擇input元素 document.execCommand("Copy");//執(zhí)行復(fù)制命令 alert("復(fù)制成功!");//彈出提示信息,不同組件可能存在寫法不同 //復(fù)制之后再刪除元素,否則無法成功賦值 document.body.removeChild(textarea_dom); //刪除動(dòng)態(tài)創(chuàng)建的節(jié)點(diǎn) }
上面的方法在頁面需要觸發(fā)復(fù)制功能的時(shí)候添加到對(duì)應(yīng)鼠標(biāo)事件即可。
2、Clipboard API(推薦)
Clipboard API中的 navigator.clipboard.writeText 方法可以更加簡(jiǎn)單的實(shí)現(xiàn)單行和多行的內(nèi)容復(fù)制,而且該方法會(huì)返回一個(gè)Promise對(duì)象,可以幫助我們簡(jiǎn)單處理復(fù)制成功或復(fù)制失敗后需要執(zhí)行的內(nèi)容。
具體實(shí)現(xiàn)如下:
handleCopy() { let copy_text = '第一行需要復(fù)制的內(nèi)容\r\n第二行需要復(fù)制的內(nèi)容';//拿到想要復(fù)制的值 // 使用Clipboard API復(fù)制文本到剪貼板中 navigator.clipboard.writeText(copy_text).then(() => { alert("復(fù)制成功!") }).catch((err)=>{ alert("復(fù)制失??!") }) }
上面的方法在頁面需要觸發(fā)復(fù)制功能的時(shí)候添加到對(duì)應(yīng)鼠標(biāo)事件即可,且在復(fù)制內(nèi)容中,直接支持換行符的實(shí)現(xiàn)。
注意:
上面的navigator.clipboard.writeText方法只有在游覽器的navigator對(duì)象下才會(huì)存在clipboard對(duì)象;如果你是在vue,react等前端框架中像上面的方法調(diào)用clipboard對(duì)象,是不存在的。
因?yàn)樵谶@類前端框架中編寫js的環(huán)境下的navigator對(duì)象并沒有提供clipboard對(duì)象,而且clipboard對(duì)象并不是navigator對(duì)象的標(biāo)準(zhǔn)屬性或方法。
因此,在這類框架中需要使用Clipboard API需要通過第三方依賴的方法去實(shí)現(xiàn)。
下面以常見的vue框架中使用Clipboard API為例:
1、首先按照第三方Clipboard依賴
npm install clipboard --save
2、在頁面文件中引入或在main.js全局引入
import Clipboard from 'clipboard'
3、在需要實(shí)現(xiàn)復(fù)制功能的方法中,寫入實(shí)現(xiàn)
<template> <div> <div class="copy_dom" @click="handleCopy"></div> </div> </template> <script> import Clipboard from 'clipboard'; export default { data: { clipboard: null } methods: { handleCopy() { // 傳遞事件綁定的元素class名和需要復(fù)制的內(nèi)容text,創(chuàng)建Clipboard實(shí)例 this.clipboard = new Clipboard('.copy_dom', { text: () => { return '第一行需要復(fù)制的內(nèi)容\r\n第二行需要復(fù)制的內(nèi)容' } }); // 復(fù)制成功后的回調(diào)函數(shù) this.clipboard.on('success', () => { // 釋放內(nèi)存,非常重要,不然會(huì)重復(fù)觸發(fā)回調(diào)函數(shù) this.clipboard.destroy(); console.log('復(fù)制成功!'); }) // 復(fù)制失敗后的回調(diào)函數(shù) this.clipboard.on('error', function(e) { console.log('復(fù)制失?。?); }) } }, //beforeDestroy() { // this.clipboard.destroy(); //組件頁面銷毀時(shí),需要手動(dòng)清理clipboard,釋放內(nèi)存 //} } </script>
上面的代碼中,clipboard實(shí)例在復(fù)制成功后,建議在success的回調(diào)函數(shù)中執(zhí)行實(shí)例銷毀的destroy方法;也可以在頁面組件關(guān)閉后的beforeDestroy生命周期執(zhí)行銷毀方法。
以上就是使用Javascript實(shí)現(xiàn)復(fù)制粘貼功能的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于Javascript復(fù)制粘貼功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
w3c編程挑戰(zhàn)_初級(jí)腳本算法實(shí)戰(zhàn)篇
下面小編就為大家?guī)硪黄獁3c編程挑戰(zhàn)_初級(jí)腳本算法實(shí)戰(zhàn)篇。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06基于 webpack2 實(shí)現(xiàn)的多入口項(xiàng)目腳手架詳解
這篇文章主要給大家介紹了基于 webpack2 實(shí)現(xiàn)的多入口項(xiàng)目腳手架的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-06-06微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果
這篇文章主要介紹了微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05js實(shí)現(xiàn)瀑布流觸底動(dòng)態(tài)加載數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)瀑布流觸底動(dòng)態(tài)加載數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09