JS實(shí)現(xiàn)一鍵復(fù)制
原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本,供大家參考,具體內(nèi)容如下
最近遇到一個(gè)需求,需要點(diǎn)擊按鈕,復(fù)制 聊天記錄的文本到剪切板
一、原理分析
瀏覽器提供了 copy 命令 ,可以復(fù)制選中的內(nèi)容
document.execCommand("copy")
如果是輸入框,可以通過 select() 方法,選中輸入框的文本,然后調(diào)用 copy 命令,將文本復(fù)制到剪切板
但是 select() 方法只對 和 有效,對于就不好使
最后我的解決方案是,在頁面中添加一個(gè) ,然后把它隱藏掉點(diǎn)擊按鈕的時(shí)候,先把 的 value 改為的 innerText,然后復(fù)制 中的內(nèi)容
二、代碼實(shí)現(xiàn)
<style type="text/css"> ? ?.wrapper {position: relative;} ? ?#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;} </style> <div class="wrapper"> ? ?<p id="text">我把你當(dāng)兄弟你卻想著復(fù)制我?</p> ? ?<textarea id="input">這是幕后黑手</textarea> ? ?<button onclick="copyText()">copy</button> </div>
<script type="text/javascript"> ? ? function copyText() { ? ? ? var text = document.getElementById("text").innerText; ? ? ? var input = document.getElementById("input"); ? ? ? input.value = text; // 修改文本框的內(nèi)容 ? ? ? input.select(); // 選中文本 ? ? ? document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令 ? ? ? alert("復(fù)制成功"); ? ? } ? ? //或者 ? ? function copyText(value) { ? ? ? ? // 創(chuàng)建元素用于復(fù)制 ? ? ? ? var aux = document.createElement("input"); ? ? ? ? // 設(shè)置元素內(nèi)容 ? ? ? ? aux.setAttribute("value", value); ? ? ? ? // 將元素插入頁面進(jìn)行調(diào)用 ? ? ? ? document.body.appendChild(aux); ? ? ? ? // 復(fù)制內(nèi)容 ? ? ? ? aux.select(); ? ? ? ? // 將內(nèi)容復(fù)制到剪貼板 ? ? ? ? document.execCommand("copy"); ? ? ? ? // 刪除創(chuàng)建元素 ? ? ? ? document.body.removeChild(aux); ? ? ? ? //提示 ? ? ? ? alert("復(fù)制內(nèi)容成功:" + aux.value); ? ? } ? </script>
三、一鍵復(fù)制
分享一個(gè)自己工作中用到的一鍵復(fù)制方法
/** ?* 一鍵粘貼 ?* @param ?{String} id [需要粘貼的內(nèi)容] ?* @param ?{String} attr [需要 copy 的屬性,默認(rèn)是 innerText,主要用途例如賦值 a 標(biāo)簽上的 href 鏈接] ?* ?* range + selection ?* ?* 1.創(chuàng)建一個(gè) range ?* 2.把內(nèi)容放入 range ?* 3.把 range 放入 selection ?* ?* 注意:參數(shù) attr 不能是自定義屬性 ?* 注意:對于 user-select: none 的元素?zé)o效 ?* 注意:當(dāng) id 為 false 且 attr 不會空,會直接復(fù)制 attr 的內(nèi)容 ?*/ copy (id, attr) { ? ? let target = null; ? ? if (attr) { ? ? ? ? target = document.createElement('div'); ? ? ? ? target.id = 'tempTarget'; ? ? ? ? target.style.opacity = '0'; ? ? ? ? if (id) { ? ? ? ? ? ? let curNode = document.querySelector('#' + id); ? ? ? ? ? ? target.innerText = curNode[attr]; ? ? ? ? } else { ? ? ? ? ? ? target.innerText = attr; ? ? ? ? } ? ? ? ? document.body.appendChild(target); ? ? } else { ? ? ? ? target = document.querySelector('#' + id); ? ? } ? ? try { ? ? ? ? let range = document.createRange(); ? ? ? ? range.selectNode(target); ? ? ? ? window.getSelection().removeAllRanges(); ? ? ? ? window.getSelection().addRange(range); ? ? ? ? document.execCommand('copy'); ? ? ? ? window.getSelection().removeAllRanges(); ? ? ? ? console.log('復(fù)制成功') ? ? } catch (e) { ? ? ? ? console.log('復(fù)制失敗') ? ? } ? ? if (attr) { ? ? ? ? // remove temp target ? ? ? ? target.parentElement.removeChild(target); ? ? } }
實(shí)現(xiàn)效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript實(shí)現(xiàn)一鍵復(fù)制文本功能的示例代碼
- Web js實(shí)現(xiàn)復(fù)制文本到粘貼板
- 使用js實(shí)現(xiàn)復(fù)制功能
- 使用?JS?復(fù)制頁面內(nèi)容的三種方案
- JavaScript實(shí)現(xiàn)一鍵復(fù)制內(nèi)容剪貼板
- js復(fù)制文本到粘貼板(Clipboard.writeText())
- Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制
- js實(shí)現(xiàn)復(fù)制粘貼的兩種方法
- JavaScript+Html5實(shí)現(xiàn)按鈕復(fù)制文字到剪切板功能(手機(jī)網(wǎng)頁兼容)
- JS實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能兼容所有瀏覽器(推薦)
- js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能(兼容所有瀏覽器)
- 簡單實(shí)現(xiàn)兼容各大瀏覽器的js復(fù)制內(nèi)容到剪切板
- JavaScript 實(shí)現(xiàn)完美兼容多瀏覽器的復(fù)制功能代碼
- 兼容主流瀏覽器的JS復(fù)制內(nèi)容到剪貼板
- js實(shí)現(xiàn)的復(fù)制兼容chrome和IE
- 兼容所有瀏覽器的js復(fù)制插件Zero使用介紹
- 用js將內(nèi)容復(fù)制到剪貼板兼容瀏覽器
- js復(fù)制網(wǎng)頁內(nèi)容并兼容各主流瀏覽器的代碼
- JS復(fù)制內(nèi)容到剪切板的實(shí)例代碼(兼容IE與火狐)
- JS/FLASH實(shí)現(xiàn)復(fù)制代碼到剪貼板(兼容所有瀏覽器)
- 多瀏覽器兼容性比較好的復(fù)制到剪貼板的js代碼
- GWT中復(fù)制到剪貼板 js+flash實(shí)現(xiàn)復(fù)制 兼容性比較好
- 兼容IE與Firefox的js 復(fù)制代碼
- JavaScript 復(fù)制功能代碼 兼容多瀏覽器
- 至2023年最好用的兼容多瀏覽器的原生js復(fù)制函數(shù)copyText
相關(guān)文章
JavaScript console對象與控制臺使用示例詳解
這篇文章主要介紹了JavaScript console對象與控制臺的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse的使用方法
這篇文章主要介紹了JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse的使用方法,JSON是JavaScript表達(dá)值和對象的通用數(shù)據(jù)格式,其本質(zhì)就是符合一定規(guī)范的字符串2022-07-07javascript+dom樹型菜單類,希望朋友們一起進(jìn)步
javascript+dom樹型菜單類,希望朋友們一起進(jìn)步...2007-05-05MutationObserver監(jiān)視對DOM?樹所做更改的功能妙用
這篇文章主要為大家介紹了MutationObserver監(jiān)視對DOM?樹所做更改的功能妙用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03

js實(shí)現(xiàn)點(diǎn)擊上傳圖片并設(shè)為模糊背景

ES6中Class類的靜態(tài)方法實(shí)例小結(jié)