clipboard.js怎么用

这篇文章将为大家详细讲解有关clipboard.js怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

（1）介绍：

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中

clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

（2）clipboard复印内容的方式有

从target复印目标内容
通过function 要复印的内容
通过属性返回复印的内容
target复印目标内容，这里不说，就说一下function和属性的操作。

（3）Function操作有两种：

第一种：

通过target的function复印内容
通过target指定要复印的节点，这里返回舒值是'hello'

   Copy_target   
hello
   

第二种：

通过text的function复印内容
text的function指定的复印内容，这里返回'to be or not to be'

Copy

第二种： 多节点

通过class获取所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3

//   通过class注册多个button，获取data-clipboard-text的值Copy    Copy    Copy 

（5）函数和属性的兼容方式

函数：

//ClipboardJS.isSupported()　　//--------这句为：是否兼容var clipboard = new Clipboard('.btn');//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择"拷贝"进行复制clipboard.on('success', function(e) {    alert('复制成功!')    e.clearSelection();});clipboard.on('error', function(e) {    alert('请选择"拷贝"进行复制!')//尝试去掉alert，能弹出系统的"拷贝"工具，但是需要点击两次按钮才能弹出，具体原因还不清楚，参考上图。有人说可以试一下在触发的地方写一个空点击事件, οnclick="" 因为ios不单纯支持on事件});

属性：

 -------------------  copy() {     var clipboard = new Clipboard(".email")     // console.log(clipboard);     clipboard.on("success", e => {       // console.log("复制成功", e);       Toast({         message: "复制成功"       })       // 释放内存       clipboard.destroy()     })     clipboard.on("error", e => {       // 不支持复制       Toast({         message: "手机权限不支持复制功能"       })       console.log("该浏览器不支持自动复制")       // 释放内存       clipboard.destroy()     })   }

关于"clipboard.js怎么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。