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標簽里的內(nèi)容。
因此,如果你想實現(xiàn)點擊一個按鈕,就復(fù)制一段話的功能
第一:如果這段話是被input或textarea標簽包裹,則可以直接只用select(),
第二:如果是其他任意標簽包裹的話,則需要新creat一個input標簽,給該input標簽賦value,然后使用select()方法,最后將該input標簽remove了。
完整代碼:
function copy(that){ var inp =document.createElement('input'); // create input標簽 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)站的支持!
相關(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生成小程序碼并直接返回圖片文件流的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧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ù)感興趣的同學,可以參考下2021-04-04Web?Woker與主線程通信場景下對postMessage的簡潔封裝詳解
這篇文章主要為大家介紹了Web?Woker與主線程通信場景下對postMessage的簡潔封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09關(guān)于VSCode格式化JS自動添加或去掉分號的問題
這篇文章主要介紹了VSCode格式化JS自動添加或去掉分號的問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10