快捷導(dǎo)航

JavaScript 點(diǎn)擊觸發(fā)復(fù)制功能實(shí)例詳解

更新時(shí)間：2018年11月02日 09:14:27 作者：迪迪的博客

這篇文章主要介紹了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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript常用腳本匯總（三）
本文給大家分享的常用腳本有通過數(shù)組，拓展字符串拼接容易導(dǎo)致性能的問題、頁(yè)面視口滾動(dòng)條的位置的輔助函數(shù)、調(diào)節(jié)元素透明度的函數(shù)、獲取鼠標(biāo)位置的幾個(gè)通用的函數(shù)、使用cssdisplay屬性來(lái)切換元素可見性的一組函數(shù)、樣式相關(guān)的通用函數(shù)、獲取元素當(dāng)前的高度和寬度。
2015-03-03
WEB前端開發(fā)框架Bootstrap3 VS Foundation5
WEB前端開發(fā)框架Bootstrap3 VS Foundation5,這篇文章主要介紹了Bootstrap3與Foundation5的五大區(qū)別,感興趣的小伙伴們可以參考一下
2016-05-05
淺談JavaScript 中的延遲加載屬性模式
改善性能的最好方法之一是避免重復(fù)兩次相同的工作。因此，只要可以緩存結(jié)果供以后使用，就可以加快程序的速度。延遲加載屬性模式技術(shù)使任何屬性都可以成為緩存層以提高性能。這里說(shuō)到的延遲加載屬性模式就是利用的訪問器屬性，將計(jì)算昂貴的操作推遲到需要時(shí)再使用
2021-06-06
點(diǎn)選TOP后并不是直接跳到頁(yè)頂?shù)?，而是滾動(dòng)上去
滾動(dòng)至頁(yè)頂，比以前的直接跳到頁(yè)頂效果好很多，正的很不錯(cuò)
2008-09-09
純 JS 實(shí)現(xiàn)放大縮小拖拽功能(完整代碼)
這篇文章主要介紹了純js實(shí)現(xiàn)放大縮小拖拽功能，文中給大家提到了在開發(fā)過程中遇到的一些問題及解決方法,需要的朋友可以參考下
2019-11-11
js將iframe中控件的值傳到主頁(yè)面控件中的實(shí)現(xiàn)方法
主要是通過在主頁(yè)面定義一個(gè)傳輸數(shù)據(jù)的函數(shù)GetData(data)，然后在iframe嵌入頁(yè)面中通過parent.GetData(data),這樣即可在GetData實(shí)現(xiàn)將data進(jìn)行處理即可。
2013-03-03
js動(dòng)態(tài)改變select選擇變更option的index值示例
今天刪除多個(gè)select值的時(shí)候出現(xiàn)了問題，搞了半天原來(lái)是索引引起的（即刪除的時(shí)候要從索引大的開始刪，然后再刪除索引小的
2014-07-07
如何動(dòng)態(tài)加載外部Javascript文件
這篇文章主要介紹了如何動(dòng)態(tài)加載外部Javascript文件，本文舉例講解使用js加載器動(dòng)態(tài)加載外部Javascript文件，感興趣的小伙伴們可以參考一下
2015-12-12
JSON.parse損壞大數(shù)字的原因解析及解決方案
從10多年前JSON在線編輯器的早期開始，用戶經(jīng)常反映編輯器有時(shí)會(huì)破壞他們JSON文檔中的大數(shù)字的問題，這篇文章主要介紹了為什么JSON.parse會(huì)損壞大數(shù)字，如何解決這個(gè)問題,需要的朋友可以參考下
2022-10-10
詳解JavaScript中的執(zhí)行上下文
執(zhí)行上下文是JavaScript中非常重要的概念，它決定了代碼的執(zhí)行順序和作用域鏈等重要信息，下面我們就來(lái)深入探討JavaScript執(zhí)行上下文的概念和工作原理吧
2023-07-07