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