JavaScript復(fù)制文案到剪貼板小技巧
需求如下
點擊按鈕復(fù)制對應(yīng)內(nèi)容到剪貼板
方案
利用document.execCommand('copy')來實現(xiàn),但是要注意兼容性。
<div class="assistant-wechat">小助理微信號:qbxq01</div> <div class="copy-wechat" onclick="copyToClipboard('qbxq01')">復(fù)制微信號</div>
JS
<script type="text/javascript"> function copyToClipboard(text) { if (text.indexOf('-') !== -1) { let arr = text.split('-'); text = arr[0] + arr[1]; } var textArea = document.createElement("textarea"); textArea.style.position = 'fixed'; textArea.style.top = '0'; textArea.style.left = '0'; textArea.style.width = '2em'; textArea.style.height = '2em'; textArea.style.padding = '0'; textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; textArea.style.background = 'transparent'; textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? '<div>小助理微信號已復(fù)制</div><div>快去加好友邀你入群</div>' : '<div>該瀏覽器不支持點擊復(fù)制到剪貼板</div>'; showAlert(msg) } catch (err) { showAlert('<div>該瀏覽器不支持點擊復(fù)制到剪貼板</div>'); } document.body.removeChild(textArea); } // 自定義提示框 function showAlert(str) { var alertPart = document.createElement('div'); alertPart.className = "alert-part"; alertPart.innerHTML = str; document.body.appendChild(alertPart); var timeout = setTimeout(function () { document.body.removeChild(alertPart); clearTimeout(timeout); }, 2000) } </script>
以上就是JavaScript復(fù)制文案到剪貼板小技巧的詳細內(nèi)容,更多關(guān)于JavaScript復(fù)制文案剪貼板的資料請關(guān)注腳本之家其它相關(guān)文章!
- JS復(fù)制到剪貼板示例代碼
- 用js將內(nèi)容復(fù)制到剪貼板兼容瀏覽器
- js實現(xiàn)點擊后將文字或圖片復(fù)制到剪貼板的方法
- JavaScript實現(xiàn)復(fù)制或剪切內(nèi)容到剪貼板功能的方法
- JS實現(xiàn)復(fù)制內(nèi)容到剪貼板功能兼容所有瀏覽器(推薦)
- js復(fù)制內(nèi)容到剪貼板代碼,js復(fù)制代碼的簡單實例
- js實現(xiàn)各種復(fù)制到剪貼板的方法(分享)
- JS實現(xiàn)復(fù)制內(nèi)容到剪貼板功能
- JavaScript復(fù)制內(nèi)容到剪貼板的兩種常用方法
- JavaScript實現(xiàn)一鍵復(fù)制內(nèi)容剪貼板
- vue中js實現(xiàn)點擊復(fù)制文本到剪貼板的3種方案
- JS 實現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié)
相關(guān)文章
基于jsbarcode 生成條形碼并將生成的條碼保存至本地+源碼
這篇文章主要介紹了基于jsbarcode 生成條形碼并將生成的條碼保存至本地,本文給大家提供最新源代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2020-04-04可能是全網(wǎng)最詳細小程序中使用echarts的教程
在開發(fā)微信小程序時,有需求需要使用到柱狀圖,餅圖等圖表,下面這篇文章主要給大家介紹了關(guān)于小程序中使用echarts的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10JS target與currentTarget區(qū)別說明
target在事件流的目標(biāo)階段;currentTarget在事件流的捕獲,目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時候,兩個的指向才是一樣的,而當(dāng)處于捕獲和冒泡階段的時候,target指向被單擊的對象而currentTarget指向當(dāng)前事件活動的對象(一般為父級)。2011-08-08基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果,需要的朋友一起學(xué)習(xí)吧2015-09-09- 在html文本框中顯示提示效果,以方便用戶的輸入,比如在輸入姓名時,會自動提示 姓名長度最多16個字符,是不是很酷哦??靵砜纯窗?/div> 2014-06-06
dtree 網(wǎng)頁樹狀菜單及傳遞對象集合到j(luò)s內(nèi),動態(tài)生成節(jié)點
最近要做一個聯(lián)系人的選擇框,選擇聯(lián)系人后,將聯(lián)系人的手機號添加到網(wǎng)頁的輸入框,可以支持復(fù)選框2012-04-04如何解決Webview和H5緩存問題確保每次加載最新版本的資源詳解
WebView在加載H5頁面時,可能會因為緩存機制導(dǎo)致用戶看到舊版本的頁面,這篇文章主要介紹了如何解決Webview和H5緩存問題確保每次加載最新版本的資源的相關(guān)資料,需要的朋友可以參考下2025-02-02最新評論