介绍

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

安装

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

npm install clipboard –save

2.引入js

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

使用

示例

 
 
 
 
 
 
 
 
 
 
 
 *
 
 
 
 new ClipboardJS(".btn");
 
 

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

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

data-clipboard-action=”cut”

 
 剪切
 
 
 
 new ClipboardJS(".btn");
 

剪切操作仅适用于或元素</p> </blockquote> <p>或者这样，直接* data-clipboard-text属性的内容</p> <pre><button>  * </button></pre> <p> </p> <h1>事件监听，可以打开控制台自行尝试</h1> <pre>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> </p> <h1>高级用法</h1> <ul class=" list-paddingleft-2"> <li> <p>动态绑定</p> </li> </ul> <pre>new ClipboardJS('.btn', {  target: function(trigger) {  return trigger.nextElementSibling;  } });</pre> </p> <ul class=" list-paddingleft-2"> <li> <p>动态赋值</p> </li> </ul> <pre>new ClipboardJS('.btn', {  text: function(trigger) {  return trigger.getAttribute('aria-label');  } });</pre> </p> <ul class=" list-paddingleft-2"> <li> <p>要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用，您需要将focus元素设置为container值</p> </li> </ul> <pre>new ClipboardJS('.btn', {  container: document.getElementById('modal') });</pre> </p> <ul class=" list-paddingleft-2"> <li> <p>更好的管理单页面的DOM*命周期</p> </li> </ul> <pre>var clipboard = new ClipboardJS('.btn'); clipboard.destroy();</pre> </p> <h1>兼容性</h1> <p>    </p> <h1>备注</h1> <p>如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级</p> <h1>提供Chrome和Firefox的扩展</h1> <p>一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“*到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。</p></div> </div> </div> <footer class="entry-footer"> <div class="readlist ds-reward-stl"> <div class="read_outer"><a class="read" href="javascript:;" title="阅读模式"><i class="fa fa-send"></i> 阅读</a></div> <div class="read_outer"><a class="comiis_poster_a" href="javascript:;" title="生成封面"><i class="fa fa-image"></i> 海报</a></div> <div id="mClick" class="mobile_click"> <div class="share"> <div class="Menu-item"><a href="javascript:Share('tqq')"><i class="fa fa-qq"></i> QQ 分享</a></div> <div class="Menu-item"><a href="javascript:Share('sina')"><i class="fa fa-weibo"></i> 微博分享</a></div> <div class="Menu-item"><i class="fa fa-weixin"></i> 微信分享<img alt="微信扫一扫" src="https://www.90558.cn/zb_users/theme/quietlee/plugin/api.php?url=https://www.90558.cn/jiu/95316.html"></div> </div> <i class="fa fa-share" title="分享转发"></i> 分享 </div> </div> </footer> </article> <nav class="single-nav"> <div class="entry-page-prev j-lazy" style="background-image: url(https://www.90558.cn/zb_users/theme/quietlee/style/noimg/5.jpg)"> <a href="https://www.90558.cn/jiu/95315.html" title="山东第三代试管需要多少钱一次？附试管医院权威名单"><span>山东第三代试管需要多少钱一次？附试管医院权威名单</span></a> <div class="entry-page-info"><span class="pull-left">« 上一篇</span><span class="pull-right">2024-04-30</span></div> </div> <div class="entry-page-next j-lazy" style="background-image: url(https://www.90558.cn/zb_users/theme/quietlee/style/noimg/3.jpg)"> <a href="https://www.90558.cn/jiu/95317.html" title="长春正规医院人工受孕价格表,到底该怎么选择"><span>长春正规医院人工受孕价格表,到底该怎么选择</span></a> <div class="entry-page-info"><span class="pull-right">下一篇 »</span><span class="pull-left">2024-04-30</span></div> </div> </nav><div class="part-mor"><!--相关文章--> <h3 class="section-title"><span><i class="fa fa-rss-square"></i>相关阅读</span></h3> <ul class="section-cont-tags pic-box-list clearfix"> <li class="readnew"><a href="https://www.90558.cn/jiu/111237.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/5.jpg" alt="贵州试管医院成功率,那该怎么选呢" title="贵州试管医院成功率,那该怎么选呢"></i> <h3>贵州试管医院成功率,那该怎么选呢</h3> <p><b class="datetime">2024-05-21</b><span class="viewd">1 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/111236.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/7.jpg" alt="人有落魄时感慨的句子大全 人在落魄时候经典句子" title="人有落魄时感慨的句子大全 人在落魄时候经典句子"></i> <h3>人有落魄时感慨的句子大全 人在落魄时候经典句子</h3> <p><b class="datetime">2024-05-21</b><span class="viewd">1 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/111235.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/4.jpg" alt="临汾2024试管医院大全(成功率排名)" title="临汾2024试管医院大全(成功率排名)"></i> <h3>临汾2024试管医院大全(成功率排名)</h3> <p><b class="datetime">2024-05-21</b><span class="viewd">1 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/111234.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/9.jpg" alt="试管婴儿怀孕之后，孕妈妈需要补充哪些营养" title="试管婴儿怀孕之后，孕妈妈需要补充哪些营养"></i> <h3>试管婴儿怀孕之后，孕妈妈需要补充哪些营养</h3> <p><b class="datetime">2024-05-21</b><span class="viewd">1 人在看</span></p> </a></li> </ul> </div> <section id="comments"> <div id="comt-respond" class="commentpost wow fadeInDown"> <h4>发表评论<span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4> <form id="frmSumbit" target="_self" method="post" action="https://www.90558.cn/zb_system/cmd.php?act=cmt&postid=95316&key=077a835166d7aacd801901e71a438841" > <input type="hidden" name="inpId" id="inpId" value="95316" /> <input type="hidden" name="inpRevID" id="inpRevID" value="0" /> <div class="comt-box"> <div class="form-group liuyan form-name"><input type="text" name="inpName" id="inpName" class="text" value="访客" placeholder="昵称" size="28" tabindex="1" /></div> <div class="form-group liuyan form-email"><input type="text" name="inpEmail" id="inpEmail" class="text" value="" placeholder="邮箱" size="28" tabindex="2" /></div> <div class="form-group liuyan form-www"><input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" placeholder="网址" size="28" tabindex="3" /></div> </div><!--verify--> <div id="comment-tools"> <div class="tools_text"> <textarea placeholder="" name="txaArticle" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5">