引入clipboard.js实现多终端一键复制能力

with 0 comment

在网页中比较常见的兼容复制能力是基于Flash开发,而著名开源项目clipboard.js经过gzip压缩后仅3kb,是一款轻量级的“复制到剪切板”插件,关于网络常见案例报错Uncaught TypeError: Illegal constructor的解决方案也在本文中提到

page_clipboard_js.jpg

关于clipboard.js

复制文本到剪贴板应该不难
它不需要许多步骤来配置或数百KBs的文件加载
最重要的是,它不应该依赖Flash或任何臃肿的框架
这就是clipboard.js的存在
以上为官网的原话,官网地址:

https://clipboardjs.com/

源码下载github:

https://github.com/zenorocha/clipboard.js/archive/master.zip

复制案例

<!--  import -->
<script src="../dist/clipboard.min.js"></script>

<!--  案例1 直接在按钮中指定值 -->
<button class="fuzhi_btn" data-clipboard-text="我是被复制的值">复制邀请码</button>

<!--  案例2 关联input框内容复制 -->
<input type="text" id="copyValue" value="我是被复制的值"/>
<button class="fuzhi_btn" type="button" data-clipboard-target='#copyValue'>复制</button>

<script>
//支持传入ID、className、标签名、Element对象
var clipboard = new ClipboardJS('.fuzhi_btn');
//safari 版本号>=10,提示复制成功;否则提示需在文字选中后,手动选择“拷贝”进行复制
clipboard.on('success', function(e) {
    alert('复制成功!')
    e.clearSelection();
});
clipboard.on('error', function(e) {
    alert('请选择“拷贝”进行复制!')
});
</script>

常见案例报错

网络上提供的很多案例中,创建clipboard对象的时候,使用的是:

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

实际上这样操作是会报错的:

Uncaught TypeError: Illegal constructor

非法构造函数,原因无非两种:

  1. clipboard.js没有成功引入
  2. clipboard.js压根没有Clipboard()这个构造函数

处理问题

Chrome浏览器F12查看network标签,可确认当前页面是否正常加载了clipboard.js
查看下载包中demo目录下的任意一个demo文件可以看到其中是使用:

var clipboard = new ClipboardJS(btn);

因此可以判定在最新的clipboard.js中使用的ClipboardJS为构造函数

兼容支持以及特殊说明

安卓手机上使用Clipboard.js来实现复制,一定要给input框value赋值
对以下浏览器兼容:

Responses