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复制文案剪贴板的资料请关注脚本之家其它相关文章!

相关文章

  • JS 异步遍历的实现方法

    JS 异步遍历的实现方法

    本文主要介绍了JS 异步遍历的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

    基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

    这篇文章主要介绍了基于jsbarcode 生成条形码并将生成的条码保存至本地,本文给大家提供最新源代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-04-04
  • Vue3中使用typescript封装axios的实例详解

    Vue3中使用typescript封装axios的实例详解

    这篇文章主要介绍了使用typescript封装axios的实例代码,为了方便,在vue3的配置里面按需加载element-plus,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2021-10-10
  • 可能是全网最详细小程序中使用echarts的教程

    可能是全网最详细小程序中使用echarts的教程

    在开发微信小程序时,有需求需要使用到柱状图,饼图等图表,下面这篇文章主要给大家介绍了关于小程序中使用echarts的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • JS target与currentTarget区别说明

    JS target与currentTarget区别说明

    target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的,而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
    2011-08-08
  • 基于Arcgis for javascript实现百度地图ABCD marker的效果

    基于Arcgis for javascript实现百度地图ABCD marker的效果

    本篇文章由脚本之家小编给大家分享的基于Arcgis for javascript实现百度地图ABCD marker的效果,需要的朋友一起学习吧
    2015-09-09
  • 移动前端图片压缩上传的实例

    移动前端图片压缩上传的实例

    下面小编就为大家分享一篇移动前端图片压缩上传的实例。具有很好的参考价值,希望对大家有所帮助。一起小编过来看看吧
    2017-12-12
  • html文本框提示效果的示例代码

    html文本框提示效果的示例代码

    在html文本框中显示提示效果,以方便用户的输入,比如在输入姓名时,会自动提示 姓名长度最多16个字符,是不是很酷哦。快来看看吧
    2014-06-06
  • dtree 网页树状菜单及传递对象集合到js内,动态生成节点

    dtree 网页树状菜单及传递对象集合到js内,动态生成节点

    最近要做一个联系人的选择框,选择联系人后,将联系人的手机号添加到网页的输入框,可以支持复选框
    2012-04-04
  • 如何解决Webview和H5缓存问题确保每次加载最新版本的资源详解

    如何解决Webview和H5缓存问题确保每次加载最新版本的资源详解

    WebView在加载H5页面时,可能会因为缓存机制导致用户看到旧版本的页面,这篇文章主要介绍了如何解决Webview和H5缓存问题确保每次加载最新版本的资源的相关资料,需要的朋友可以参考下
    2025-02-02

最新评论