学习了clipboard复制剪切插件的使用

第一步:引入clipboard插件JS

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

第二步:在HTML代码加入clipboard相关属性

<!DOCTYPE html>
<html>
<head>
<title>测试页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js/clipboard.min.js" type="text/javascript"></script>
</head>
<body>
<div id="clip" class="clip" data-clipboard-action="copy" data-clipboard-target=".clip" data-clipboard-text="在这里填写要复制的内容也可以">这里填写要复制的内容</div>
</body>
<script>
var clipboard = new ClipboardJS('.clip');
clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</html>

其中data-clipboard-target、data-clipboard-text、data-clipboard-action是clipboard插件自带的属性,id和class可以自己任选一个用来调用要复制的HTML标签。

data-clipboard-target:是用来绑定要复制的目标HTML标签,可以是class或id;

data-clipboard-text:是用来设置要复制或者剪切的文本内容的属性;文章地址https://www.yii666.com/article/758211.html

data-clipboard-action:是用来设置复制或者剪切事件的,可以是copy或cut,如不填默认为copy;网址:yii666.com<网址:yii666.com

我们可以实例化一个ClipboardJS类,用on绑定clipboard自带的成功和失败事件,用console.log打印出插件的相关参数进行调试。

注意:亲自测试发现在某些情况下如果没有设置data-clipboard-text属性会出现不能正常复制内容的情况,可以用data-clipboard-text设置要复制的内容从而解决问题。文章来源地址https://www.yii666.com/article/758211.html文章来源地址:https://www.yii666.com/article/758211.html

在使用过程中如遇到困难欢迎在下方留言咨询,看到后第一时间进行回复。谢谢。

附上clipboard插件的官网链接:https://clipboardjs.com/

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

学习了clipboard复制剪切插件的使用-相关文章

  1. Android Clipboard(复制/剪贴板)

  2. 学习了clipboard复制剪切插件的使用

  3. lua 复制table

  4. jQuery复制table header到表格的最下面

  5. [Lua]table(一):打印与复制

  6. 使用LayUI展示数据

    LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区。点击查看 文档地址 下载框架使用:1.把这个5个文件项都拷贝到项目中2.到layui官网 地址 将后台布局的代码考过来,做一个左侧导航,右侧显示主内

  7. 在layui中,新的页面怎么获取另一个页面传过来的数据,并可以对数据进行判断,layui中的后台分页(table)。

    例如:打开一个新页面的同时,传数据。layer.open({ type: 2, title: \\\'新增项目\\\', shadeClose: false, shade: [0.3], maxmin: true, //开启最大化最小化按钮 area: [\\\'900px\\\', \\\'90%\\\'], scrollbar: false, //屏蔽滚动条 content: \\\'operate.html?type=addbuildingId=\\\' + buildingId + \\\'businessId=\\\' + businessId});==================================

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png