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责任链模式是一种行为型设计模式,它允许多个对象按照顺序处理请求,直到其中一个对象能够处理请求为止,这样的对象链被称为责任链,本文将给大家详细讲讲责任链模式在JS中的应用,需要的朋友可以参考下
    2023-08-08
  • 学习JavaScript设计模式(链式调用)

    学习JavaScript设计模式(链式调用)

    这篇文章主要带领大家学习JavaScript设计模式,其中重点介绍链式调用,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 微信小程序自定义弹出层效果

    微信小程序自定义弹出层效果

    这篇文章主要为大家详细介绍了微信小程序自定义弹出层效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 如何使用Bootstrap 按钮实例详解

    如何使用Bootstrap 按钮实例详解

    本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式。具体通过本文实例详解
    2017-03-03
  • 12个非常有创意的JavaScript小游戏

    12个非常有创意的JavaScript小游戏

    JavaScript 在Web开发过程中已经是必不可少的重要分子,他推动着Web的交互性往越来越高的层次发展,现在的很多Web游戏也基于这类语言开发。
    2010-03-03
  • JavaScript实现N皇后问题算法谜题解答

    JavaScript实现N皇后问题算法谜题解答

    这篇文章主要介绍了JavaScript实现N皇后问题算法谜题解答,N皇后问题是指将N个皇后放置在NxN的国际象棋棋盘上,其中没有任何两个皇后处于同一行、同一列或同一对角线上,以使得它们不能互相攻击,需要的朋友可以参考下
    2014-12-12
  • js网页右下角提示框实例

    js网页右下角提示框实例

    这篇文章主要介绍了js网页右下角提示框的实现方法,以实例展示了css样式与HTML布局,以及对应的js显示与关闭提示框等功能,需要的朋友可以参考下
    2014-10-10
  • uniapp中全局页面挂载组件实战过程(小程序)

    uniapp中全局页面挂载组件实战过程(小程序)

    这篇文章主要给大家介绍了关于uniapp中全局页面挂载组件(小程序)的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用uniapp具有一定的参考学习价值,需要的朋友可以参考下
    2022-12-12
  • 不错的用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果

    不错的用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果

    不错的用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果...
    2007-08-08
  • 惰性函数定义模式 使用方法

    惰性函数定义模式 使用方法

    惰性函数定义模式 使用方法...
    2007-09-09

最新评论