介绍

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><figure class=wp-block-image><img class=j-lazy src=http://img.cnmzd.com/d/file/2022-03-19-14/uutewjrsx5b6270.jpg alt=在网页上优雅的粘贴复制clipboard.js></figure><h1>备注</h1><p>如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级</p><h1>提供Chrome和Firefox的扩展</h1><p>一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。</p></div> <div class="content-more-1"><div class="gradient-1"></div> <label for="contTab-1" class="readmore-1">点击展开全文</label></div> </div> <div class="pagination pagination-multi"><ul></ul></div> <div class="article-tags"></div> <div class="ad"><script src=https://www.zlme.com/d/js/acmsd/thea6.js></script></div> <p class="post-copyright">版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 ZLME@ZLME.COM 举报，一经查实，立刻删除。</p> </article> <nav class="article-nav"> <span class="article-nav-prev">上一篇<br> <a href='http://www.zlme.com/post/2022/03/22/59527.html'>flask web开发实战源代码</a></span> <span class="article-nav-next">下一篇<br> <a href='http://www.zlme.com/post/2022/03/22/59529.html'>电脑照相软件哪个好用</a></span> </nav> <h3 class="title" id="comments"> <div class="text-muted pull-right"> </div> </h3> <link href="https://www.zlme.com/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="https://www.zlme.com/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="https://www.zlme.com/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!">

验证码：