介绍

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

安装

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

RW。HAO22.COm

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><font class="ENI89">RW。HAO22.COm</font><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><font class="ENI89">RW。HAO22.COm</font><p>如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级</p><h1>提供Chrome和Firefox的扩展</h1><font class="ENI89">RW。HAO22.COm</font><p>一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。</p><font class="ENI89">RW。HAO22.COm</font><p align=center> <style> .ENI89 { display:none; } </style> </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://fl.hao22.com/i2074505.html" title="麒麟9000和骁龙8gen1对比-麒麟9000和骁龙8gen1哪个好">麒麟9000和骁龙8gen1对比-麒麟9000和骁龙8gen1哪个好</a> <div class="entry-meta"> 01-03 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i2016404.html" title="Pixel6价格_Pixel6售价公布">Pixel6价格_Pixel6售价公布</a> <div class="entry-meta"> 11-25 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://fl.hao22.com/i2076285.html" title="敏感肌面膜推荐-敏感肌面膜怎么选">敏感肌面膜推荐-敏感肌面膜怎么选</a> <div class="entry-meta"> 01-03 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://yl620.hao22.com/i6277.html" title="荣耀20手机怎么样 荣耀20值得买吗">荣耀20手机怎么样 荣耀20值得买吗</a> <div class="entry-meta"> 04-12 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://yl620.hao22.com/i317577.html" title="r32要几个压">r32要几个压</a> <div class="entry-meta"> 04-27 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://rw.hao22.com/i1959947.html" title="球类运动强度排行榜：橄榄球、篮球、冰球、羽毛球等运动上榜">球类运动强度排行榜：橄榄球、篮球、冰球、羽毛球等运动上榜</a> <div class="entry-meta"> 11-26 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://jk108.hao22.com/i1342316.html" title="塑料餐盒有毒吗 塑料餐盒能加热吗">塑料餐盒有毒吗 塑料餐盒能加热吗</a> <div class="entry-meta"> 03-14 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://rw.hao22.com/i1992242.html" title="设计导航网页制作（网页导航栏设计样式）">设计导航网页制作（网页导航栏设计样式）</a> <div class="entry-meta"> 03-04 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://yl620.hao22.com/i4327.html" title="2019十大手机浏览器排名 最受欢迎的手机浏览器排名">2019十大手机浏览器排名 最受欢迎的手机浏览器排名</a> <div class="entry-meta"> 09-01 </div> </div> </li> <li class="clear"> <div class="entry-wrap"> <a href="http://rw.hao22.com/i1991362.html" title="高防服务器购买哪家做的好（游戏服务器推荐）">高防服务器购买哪家做的好（游戏服务器推荐）</a> <div class="entry-meta"> 11-18 </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/i1367.html" title="中年女性送什么小礼物，想暖心选对礼物很重要，赶紧来看看">中年女性送什么小礼物，想暖心选对礼物很重要，赶紧来看看 </a></li> <li><a href="http://fl.hao22.com/i1413629.html" title="一加9r和一加9区别_一加9r和一加9哪个好">一加9r和一加9区别_一加9r和一加9哪个好 </a></li> <li><a href="http://fl.hao22.com/i1402301.html" title="冰雨火王一博吻戏_冰雨火王一博郭晓婷吻戏">冰雨火王一博吻戏_冰雨火王一博郭晓婷吻戏 </a></li> <li><a href="http://fl.hao22.com/i2064010.html" title="oppok9pro屏幕ppi_oppok9pro屏幕ppi是多少">oppok9pro屏幕ppi_oppok9pro屏幕ppi是多少 </a></li> <li><a href="http://fl.hao22.com/i2066770.html" title="iphone13出来后11会降价吗_iphone13出来后11会降多少">iphone13出来后11会降价吗_iphone13出来后11会降多少 </a></li> <li><a href="http://fl.hao22.com/i1726435.html" title="戈林沃德(电影哈7上里面格林沃德是在哪里出现的他和邓布利多的事书里有吗?我都忘了)">戈林沃德(电影哈7上里面格林沃德是在哪里出现的他和邓布利多的事书里有吗?我都忘了) </a></li> <li><a href="http://fl.hao22.com/i3604.html" title="杭州周边二日游 地点：临安湍口众安氡温泉加大明山滑雪 时间：2.13-2.14">杭州周边二日游 地点：临安湍口众安氡温泉加大明山滑雪 时间：2.13-2.14 </a></li> <li><a href="http://fl.hao22.com/i1417836.html" title="伊朗船运(伊朗航运货物跟踪)">伊朗船运(伊朗航运货物跟踪) </a></li> <li><a href="http://fl.hao22.com/i1682199.html" title="准备的拼音-准备睡觉?拼音怎么打？">准备的拼音-准备睡觉?拼音怎么打？ </a></li> <li><a href="http://fl.hao22.com/i2063239.html" title="iOS15.0.2值得更新吗_iOS15.0.2值不值得更新">iOS15.0.2值得更新吗_iOS15.0.2值不值得更新 </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>