介绍

clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。

安装

1. 通过npm安装（或者直接下载js文件引入）

npm install clipboard –save

2.引入js

//官网提供了下载地址，也可以使用免费的cdn

使用

示例

 
 
 
 
 
 
 
 
 
 

 
 
复制
 

 
 
 

如图书最简单的例子，单机复制按钮即可自动复制文本框的内容

换成下面就会变成剪切，主要是以下属性

data-clipboard-action=”cut”

 
 
剪切
 

 
 

剪切操作仅适用于或元素</p></blockquote><p>或者这样，直接复制 data-clipboard-text属性的内容</p><pre class=wp-block-preformatted><button class="btn" data-clipboard-text="要复制的内容"> 复制 </button> </pre><hr class=wp-block-separator><h1>事件监听，可以打开控制台自行尝试</h1><pre class=wp-block-preformatted>var clipboard = new ClipboardJS(".btn"); clipboard.on("success", function(e) { console.info("Action:", e.action); console.info("Text:", e.text); console.info("Trigger:", e.trigger); e.clearSelection(); }); clipboard.on("error", function(e) { console.error("Action:", e.action); console.error("Trigger:", e.trigger); }); </pre><h1>高级用法</h1><ul><li>动态绑定</li></ul><pre class=wp-block-preformatted>new ClipboardJS(".btn", { target: function(trigger) { return trigger.nextElementSibling; } }); </pre><ul><li>动态赋值</li></ul><pre class=wp-block-preformatted>new ClipboardJS(".btn", { text: function(trigger) { return trigger.getAttribute("aria-label"); } }); </pre><ul><li>要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用，您需要将focus元素设置为container值</li></ul><pre class=wp-block-preformatted>new ClipboardJS(".btn", { container: document.getElementById("modal") }); </pre><ul><li>更好的管理单页面的DOM生命周期</li></ul><pre class=wp-block-preformatted>var clipboard = new ClipboardJS(".btn"); clipboard.destroy(); </pre><h1>兼容性</h1><img src=/attachment/info/202201/pu13usorbrx6197.jpg alt=在网页上优雅的粘贴复制clipboard.js><h1>备注</h1><p>如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级</p><h1>提供Chrome和Firefox的扩展</h1><p>一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。</p><p align=center> </div> </article> </main> </div> </div> <aside id="secondary" class="widget-area sidebar"> <div id="aside_hot_comment" class="widget widget_posts_thumbnail"> <h2 class="widget-title">我喜欢的文章</h2> <ul> <li class="clear"> <div class="entry-wrap"> <a href="http://qc620.hao22.com/i96649.html" title="银川十大特产 银川特产有哪些可以带">银川十大特产 银川特产有哪些可以带</a> <div class="entry-meta"> 10-03 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i1400436.html" title="小米11hd怎么关闭_小米11hd是什么意思怎么关闭">小米11hd怎么关闭_小米11hd是什么意思怎么关闭</a> <div class="entry-meta"> 07-17 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i1398742.html" title="全画幅和半画幅的区别大吗_全画幅和半画幅哪个好">全画幅和半画幅的区别大吗_全画幅和半画幅哪个好</a> <div class="entry-meta"> 11-13 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i1400925.html" title="黑鲨4pro参数配置_黑鲨4pro参数详情">黑鲨4pro参数配置_黑鲨4pro参数详情</a> <div class="entry-meta"> 08-26 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://qc620.hao22.com/i108236.html" title="沈阳十大特产 沈阳特产有哪些可带走">沈阳十大特产 沈阳特产有哪些可带走</a> <div class="entry-meta"> 07-19 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i1682251.html" title="张家口断桥铝门窗(哪家断桥铝门窗做的最好)">张家口断桥铝门窗(哪家断桥铝门窗做的最好)</a> <div class="entry-meta"> 08-17 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i1410291.html" title="黑鲨4和红米K40哪个好_黑鲨4和红米K40有什么区别">黑鲨4和红米K40哪个好_黑鲨4和红米K40有什么区别</a> <div class="entry-meta"> 10-30 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i5801.html" title="2014世界十大女富豪排行榜 世界上最有钱的10个女人">2014世界十大女富豪排行榜 世界上最有钱的10个女人</a> <div class="entry-meta"> 11-05 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://qc620.hao22.com/i4124.html" title="世界上最贵的冰淇淋，价值677万人民币的甜筒">世界上最贵的冰淇淋，价值677万人民币的甜筒</a> <div class="entry-meta"> 11-12 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i1925.html" title="【星巴克买一送一】周五我们都约星巴克！新品萌化少女心，好喝不腻">【星巴克买一送一】周五我们都约星巴克！新品萌化少女心，好喝不腻</a> <div class="entry-meta"> 07-15 </div> </div> </li> </ul> </div> <div id="divPrevious" class="widget widget_posts_thumbnail"> <h2 class="widget-title">随机文章</h2> <ul> <li><a href="http://fl.hao22.com/i1567458.html" title="从此不再一个人(从此不再是一个人是什么歌)">从此不再一个人(从此不再是一个人是什么歌) </a></li> <li><a href="http://fl.hao22.com/i1398712.html" title="ysl方管157号试色_ysl方管157和156哪个适合黄皮">ysl方管157号试色_ysl方管157和156哪个适合黄皮 </a></li> <li><a href="http://fl.hao22.com/i28765.html" title="初中英语语法大全">初中英语语法大全 </a></li> <li><a href="http://fl.hao22.com/i1970121.html" title="小米MIX4发热严重吗_小米MIX4散热表现">小米MIX4发热严重吗_小米MIX4散热表现 </a></li> <li><a href="http://fl.hao22.com/i1410088.html" title="红魔6跑分多少_红魔6跑分详情">红魔6跑分多少_红魔6跑分详情 </a></li> <li><a href="http://fl.hao22.com/i1398698.html" title="小米11有ip68有ip68吗_小米11防水有ip68吗">小米11有ip68有ip68吗_小米11防水有ip68吗 </a></li> <li><a href="http://fl.hao22.com/i2776537.html" title="全球十大鞋业代工厂：福建新路、青春之家等企业上榜">全球十大鞋业代工厂：福建新路、青春之家等企业上榜 </a></li> <li><a href="http://fl.hao22.com/i1588505.html" title="东航期货服务热线(请问东航期货客服是多少)">东航期货服务热线(请问东航期货客服是多少) </a></li> <li><a href="http://fl.hao22.com/i6395.html" title="全年必备的护肤品——Centella仙缇拉皇后水  centella仙缇拉 天然有机护肤品">全年必备的护肤品——Centella仙缇拉皇后水  centella仙缇拉 天然有机护肤品 </a></li> <li><a href="http://fl.hao22.com/i1558915.html" title="魔女游戏(魔女游戏国语版)">魔女游戏(魔女游戏国语版) </a></li> </ul> </div> </aside> </div> <footer id="colophon" class="site-footer "> <div id="site-bottom" class="clear"> <div class="container"> <div class="site-info"> <script> (function(){ var bp = document.createElement("script"); var curProtocol = window.location.protocol.split(":")[0]; if (curProtocol === "https") { bp.src = "https://zz.bdstatic.com/linksubmit/push.js"; } else { bp.src = "http://push.zhanzhang.baidu.com/push.js"; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <div style="display:none"> <script type="text/javascript" src="https://s23.cnzz.com/z_stat.php?id=5957947&web_id=5957947"></script> </div> <a href="http://www.hao22.com/">©2005-2020</a> Powered by <a href="http://www.hao22.com/" rel="nofollow" target="_blank">三一六网</a> <br/> <a target="_blank" href="http://beian.miit.gov.cn/"><img src="http://img.hao22.com/style/images/guohui.png" style="width: 16px;">闽ICP备10200827号-6</a> </div> </div> </div> </footer> </div> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script> <script type='text/javascript' src='http://cdn.staticfile.org/SlickNav/1.0.10/jquery.slicknav.js'></script> <script type='text/javascript' src='http://cdn.staticfile.org/jquery.sticky/1.0.4/jquery.sticky.js'></script> <div id="back-top"> <a href="#top" title="返回顶部"> <span class="genericon genericon-collapse"><i>顶</i></span> </a> </div> <script type='text/javascript' src='http://img.hao22.com/style/style.js'></script> <div id='m_contact'> </div> <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js" type="text/javascript"></script> <script> function showerweima(){ layer.open({ title:'扫二维码关注微信', type: 1, skin: 'layui-layer-demo', //样式类名 closeBtn: 1, //不显示关闭按钮 anim: 2, shadeClose: true, //开启遮罩关闭 content: '<img width="250" height="250" src="http://img.hao22.com"><p style="text-align: center;">长按保存图片</p>' }); } </script> <script>var current_domain='http://rw.hao22.com';var infoid='2070317';</script> <script src="http://img.hao22.com/template/default/js/info.js" type="text/javascript"></script> <script src="http://img.hao22.com/template/global/messagebox.js" type="text/javascript"></script> </body> </html>