JavaScript复制文案到剪贴板小技巧
更新时间:2023年07月31日 10:49:32 作者:半亩花田
这篇文章主要为大家介绍了JavaScript复制文案到剪贴板实现小技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
需求如下
点击按钮复制对应内容到剪贴板

方案
利用document.execCommand('copy')来实现,但是要注意兼容性。
<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
基于Arcgis for javascript实现百度地图ABCD marker的效果
本篇文章由脚本之家小编给大家分享的基于Arcgis for javascript实现百度地图ABCD marker的效果,需要的朋友一起学习吧2015-09-09
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
最近要做一个联系人的选择框,选择联系人后,将联系人的手机号添加到网页的输入框,可以支持复选框2012-04-04
如何解决Webview和H5缓存问题确保每次加载最新版本的资源详解
WebView在加载H5页面时,可能会因为缓存机制导致用户看到旧版本的页面,这篇文章主要介绍了如何解决Webview和H5缓存问题确保每次加载最新版本的资源的相关资料,需要的朋友可以参考下2025-02-02


最新评论