clipboard使用和报错解决

86 阅读 0 评论 57 点赞

我是靠谱客的博主昏睡人生，最近开发中收集的这篇文章主要介绍clipboard使用和报错解决，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.clipboard简介

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。

2.下载地址

clipboard官网

3.使用

（1）第一步：引入js文件：

<script src="<%=request.getContextPath() %>/resources/js/clipboard.min.js"></script>

（2）复制：

<body>
    <span id="invitation_code">${invitationCode }</span>
    <div id='copyCode' data-clipboard-action="copy" data-clipboard-target="#invitation_code" >复制邀请码</div>
    
    <script src="<%=request.getContextPath() %>/resources/js/clipboard.min.js"></script>
    <script type="text/javascript">
    var clipboard = new ClipboardJS('#copyCode');
    clipboard.on('success', function(e){
        //console.log(e);
        alert("复制成功");
    });
    clipboard.on('error', function(e){
	     alert("复制失败，请连续点击链接三次复制");
    });
    </script>
</body>

4.使用小结

clipboard有复制和剪切两种动作：

（1）data-clipboard-action="copy"：复制；

（2）data-clipboard-action="cut"：剪切；

关于data-clipboard-target="#invitation_code"：

data-clipboard-target="复制内容所在标签"；

5.出错解决

大部分博文实例化是这样的：

var clipboard = new Clipboard('.btn');

但是我下载的版本，实例化方法是：

var clipboard = new ClipboardJS('.btn');

一开始使用的是前面的实例化方法，报错了，后来点开官网下载的压缩包，看样例，看到初始化方法名是ClipboardJS而不是Clipboard：

最后

以上就是昏睡人生为你收集整理的clipboard使用和报错解决的全部内容，希望文章能够帮你解决clipboard使用和报错解决所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Other
浏览次数：86 次浏览
发布日期：2023-10-04 09:05:57
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzogf2_13_j_2_4.html

clipboard使用和报错解决

概述

1.clipboard简介

2.下载地址

3.使用

4.使用小结

clipboard有复制和剪切两种动作：

关于data-clipboard-target="#invitation_code"：

5.出错解决

最后

评论列表共有 0 条评论

发表评论取消回复

clipboard使用和报错解决

概述

1.clipboard简介

2.下载地址

3.使用

4.使用小结

clipboard有复制和剪切两种动作：

关于data-clipboard-target="#invitation_code"：

5.出错解决

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复