JavaScript 點(diǎn)擊觸發(fā)復(fù)制功能實(shí)例詳解
摘要:
js調(diào)用復(fù)制功能使用:
document.execCommand("copy", false);
document.execCommand()方法功能很強(qiáng)大,了解更多請(qǐng)戳:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
正文:
調(diào)用以上方法,就實(shí)現(xiàn)了copy功能,可是,在調(diào)用之前,你需要先選中需要復(fù)制的內(nèi)容。
選中需要復(fù)制的內(nèi)容可使用select()方法,然而該方法只能選中input或者textarea標(biāo)簽里的內(nèi)容。
因此,如果你想實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕,就復(fù)制一段話的功能
第一:如果這段話是被input或textarea標(biāo)簽包裹,則可以直接只用select(),
第二:如果是其他任意標(biāo)簽包裹的話,則需要新creat一個(gè)input標(biāo)簽,給該input標(biāo)簽賦value,然后使用select()方法,最后將該input標(biāo)簽remove了。
完整代碼:
function copy(that){ var inp =document.createElement('input'); // create input標(biāo)簽 document.body.appendChild(inp) // 添加到body中 inp.value =that.textContent // 給input設(shè)置value屬性為需要copy的內(nèi)容 inp.select(); // 選中 document.execCommand('copy',false); // copy已經(jīng)選中的內(nèi)容 inp.remove(); // 刪除掉這個(gè)dom } <p onclick="copy(this)">hello man</p>
小知識(shí)點(diǎn):
1:select()使用范圍;
2:刪除一個(gè)dom,使用node.remove();
3:調(diào)用復(fù)制功能使用document.execCommand()方法;
參考鏈接:
https://stackoverflow.com/questions/45071353/javascript-copy-text-string-on-click
總結(jié)
以上所述是小編給大家介紹的JavaScript 點(diǎn)擊觸發(fā)復(fù)制功能 ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本功能
- js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能(兼容所有瀏覽器)
- js實(shí)現(xiàn)點(diǎn)擊后將文字或圖片復(fù)制到剪貼板的方法
- JS簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊復(fù)制鏈接的方法
- 用 javascript 實(shí)現(xiàn)的點(diǎn)擊復(fù)制代碼
- JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕就復(fù)制當(dāng)前網(wǎng)址
- 點(diǎn)擊進(jìn)行復(fù)制的JS代碼實(shí)例
- 原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪切板
- JavaScript實(shí)現(xiàn)點(diǎn)擊復(fù)制功能具體代碼(JS訪問(wèn)剪貼板相關(guān))
相關(guān)文章
javascript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器效果【推薦】
下面小編就為大家?guī)?lái)一篇javascript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器效果【推薦】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截圖功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截圖功能,本文介紹了2款實(shí)現(xiàn)JavaScript截圖的開(kāi)源組件,一個(gè)是Canvas2Image,一個(gè)是html2canvas,需要的朋友可以參考下2014-10-10js實(shí)現(xiàn)顯示手機(jī)號(hào)碼效果
本文主要介紹了js實(shí)現(xiàn)顯示手機(jī)號(hào)碼效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法
這篇文章主要介紹了利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法,可實(shí)現(xiàn)顯示一些按鈕如果點(diǎn)擊了,按鈕文本變?yōu)椤包c(diǎn)了”,其他按鈕文本變?yōu)椤皼](méi)點(diǎn)”的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05js實(shí)現(xiàn)點(diǎn)擊添加一個(gè)input節(jié)點(diǎn)
本文給大家分享的是一段點(diǎn)擊自動(dòng)添加inpu節(jié)點(diǎn)的代碼,非常的簡(jiǎn)單實(shí)用,這里推薦給大家。2014-12-12Javascript怎樣使用SessionStorage和LocalStorage
這篇文章主要介紹了Javascript怎樣使用SessionStorage和LocalStorage,對(duì)web存儲(chǔ)數(shù)據(jù)感興趣的同學(xué),可以參考下2021-04-04Web?Woker與主線程通信場(chǎng)景下對(duì)postMessage的簡(jiǎn)潔封裝詳解
這篇文章主要為大家介紹了Web?Woker與主線程通信場(chǎng)景下對(duì)postMessage的簡(jiǎn)潔封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09關(guān)于VSCode格式化JS自動(dòng)添加或去掉分號(hào)的問(wèn)題
這篇文章主要介紹了VSCode格式化JS自動(dòng)添加或去掉分號(hào)的問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10