JavaScript復制文案到剪貼板小技巧
更新時間:2023年07月31日 10:49:32 作者:半畝花田
這篇文章主要為大家介紹了JavaScript復制文案到剪貼板實現(xiàn)小技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
需求如下
點擊按鈕復制對應內容到剪貼板

方案
利用document.execCommand('copy')來實現(xiàn),但是要注意兼容性。
<div class="assistant-wechat">小助理微信號:qbxq01</div>
<div class="copy-wechat" onclick="copyToClipboard('qbxq01')">復制微信號</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>小助理微信號已復制</div><div>快去加好友邀你入群</div>' : '<div>該瀏覽器不支持點擊復制到剪貼板</div>';
showAlert(msg)
} catch (err) {
showAlert('<div>該瀏覽器不支持點擊復制到剪貼板</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復制文案到剪貼板小技巧的詳細內容,更多關于JavaScript復制文案剪貼板的資料請關注腳本之家其它相關文章!
您可能感興趣的文章:
相關文章
基于jsbarcode 生成條形碼并將生成的條碼保存至本地+源碼
這篇文章主要介紹了基于jsbarcode 生成條形碼并將生成的條碼保存至本地,本文給大家提供最新源代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2020-04-04
JS target與currentTarget區(qū)別說明
target在事件流的目標階段;currentTarget在事件流的捕獲,目標及冒泡階段。只有當事件流處在目標階段的時候,兩個的指向才是一樣的,而當處于捕獲和冒泡階段的時候,target指向被單擊的對象而currentTarget指向當前事件活動的對象(一般為父級)。2011-08-08
基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果,需要的朋友一起學習吧2015-09-09
在html文本框中顯示提示效果,以方便用戶的輸入,比如在輸入姓名時,會自動提示 姓名長度最多16個字符,是不是很酷哦??靵砜纯窗?/div> 2014-06-06
dtree 網頁樹狀菜單及傳遞對象集合到js內,動態(tài)生成節(jié)點
最近要做一個聯(lián)系人的選擇框,選擇聯(lián)系人后,將聯(lián)系人的手機號添加到網頁的輸入框,可以支持復選框2012-04-04
如何解決Webview和H5緩存問題確保每次加載最新版本的資源詳解
WebView在加載H5頁面時,可能會因為緩存機制導致用戶看到舊版本的頁面,這篇文章主要介紹了如何解決Webview和H5緩存問題確保每次加載最新版本的資源的相關資料,需要的朋友可以參考下2025-02-02最新評論

