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

相关文章

  • Javascript动画效果(1)

    Javascript动画效果(1)

    这篇文章主要为大家详细介绍了第一篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • HTML页面定时跳转方法解析(2种任选)

    HTML页面定时跳转方法解析(2种任选)

    本文主要对HTML页面定时跳转进行方法介绍:1、meta refresh 实现。2、JavaScript 实现。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JavaScript函数中this指向问题详解

    JavaScript函数中this指向问题详解

    这篇文章主要给大家介绍了关于JavaScript函数中this指向问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • JavaScript语法 JSON序列化之stringify实例详解

    JavaScript语法 JSON序列化之stringify实例详解

    这篇文章主要为大家介绍了JavaScript语法 JSON序列化之stringify实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • webpack3之loader全解析

    webpack3之loader全解析

    这篇文章主要介绍了webpack3之loader全解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 解决layui表格的表头不滚动的问题

    解决layui表格的表头不滚动的问题

    今天小编就为大家分享一篇解决layui表格的表头不滚动的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js和jquery分别验证单选框、复选框、下拉框

    js和jquery分别验证单选框、复选框、下拉框

    这篇文章主要为大家详细介绍了js和jquery分别验证单选框、复选框、下拉框的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JS中==、===你分清楚了吗

    JS中==、===你分清楚了吗

    这篇文章主要介绍了JS中==、===你分清楚了吗,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • javascript如何在foreach循环完成之后执行一个回调函数

    javascript如何在foreach循环完成之后执行一个回调函数

    forEach()是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是 for 循环的升级版,下面这篇文章主要给大家介绍了关于javascript如何在foreach循环完成之后执行一个回调函数的相关资料,需要的朋友可以参考下
    2023-11-11
  • js中toString方法3个作用

    js中toString方法3个作用

    这篇文章主要给大家分享了js中toString方法的3个作用,文章围绕js中toString方法的相关资料展开全文内容,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2021-12-12

最新评论