clipboard.js 实现复制文本到剪贴板功能,JS复制文本到粘贴板

使用开源项目 clipboard.js

官网：https://clipboardjs.com

使用方法：

1.在页面引入clipboard.js 和 jquery.min.js

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/clipboard.min.js"></script>

或者使用BootCDN引入

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>

2.从元素内容复制文本

设置触发元素的data-clipboard-action属性，该属性的值为copy（复制）/cut（剪切）

设置data-clipboard-target属性，该属性值是要复制/剪切的目标元素的ID或data-clipboard-target属性值

<!--target-->
<span class="url" id="copyUrl">https://blog.csdn.net/qq_42324086/article/details/94355966</span>
<!--trigger-->
<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="copy" data-clipboard-target="#copyUrl">复制</a>

3.从元素属性复制文本

 <a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="https://blog.csdn.net/qq_42324086/article/details/94355966">复制</a>

4.执行JS事件

var clipboard = new Clipboard('#copyBtn');
       clipboard.on('success', function(e) {
			e.clearSelection();
           console.log('success');
       });
       clipboard.on('error', function(e) {
           console.log('error');
       });

总结项目中实际遇到的问题

 刚开始查资料用的实例方法是

var clipboard = new Clipboard('#codeBtn');

然后控制台会报错  Uncaught TypeError: Illegal constructor

然后查了看了官方代码后，貌似v2.0 以后不能用这个方法实例化了，必须给后面加个大写的JS。

新的实例化方法

var clipboard = new ClipboardJS('#codeBtn');