介绍

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/8.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/8.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/164403.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">2026-09-04</b><span class="viewd">4 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/164402.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">2026-09-04</b><span class="viewd">10 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/164401.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/4.jpg" alt="吕梁专业靠谱试管助孕公司,提供优质助孕生孩子服务!" title="吕梁专业靠谱试管助孕公司,提供优质助孕生孩子服务!"></i> <h3>吕梁专业靠谱试管助孕公司,提供优质助孕生孩子服务!</h3> <p><b class="datetime">2026-09-04</b><span class="viewd">9 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/164400.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/8.jpg" alt="海南三代试管生儿子费用明细,附当地医院选择与省钱攻略!" title="海南三代试管生儿子费用明细,附当地医院选择与省钱攻略!"></i> <h3>海南三代试管生儿子费用明细,附当地医院选择与省钱攻略!</h3> <p><b class="datetime">2026-09-04</b><span class="viewd">13 人在看</span></p> </a></li> </ul> </div> <a href="https://www.90558.cn/jiu/95315.html" class="prev-article" title="山东第三代试管需要多少钱一次？附试管医院权威名单"> <i class="fa fa fa-angle-left"></i> </a><a href="https://www.90558.cn/jiu/95317.html" class="next-article" title="长春正规医院人工受孕价格表,到底该怎么选择"> <i class="fa fa fa-angle-right"></i> </a> </div> <aside class="side fr"> <section class="widget wow fadeInDown" id="side_hot"> <h3 class="widget-title"><i class="fa fa-side_hot"></i><span>热门文章</span></h3> <ul class="widget-box side_hot"><div class="hotimg"><div class="list-item list-overlay-content"><div class="media media-2x1"><a class="media-content" href="https://www.90558.cn/jiu/141105.html" target="_blank" style="background-image:url(https://www.90558.cn/zb_users/theme/quietlee/style/noimg/2.jpg)" title="哪些的婴儿玩具较为安全性（婴儿玩具品牌排行榜前十名）"><span class="overlay"></span></a></div><div class="list-content"><div class="list-body"><a href="https://www.90558.cn/jiu/141105.html" class="list-title h-2x">哪些的婴儿玩具较为安全性（婴儿玩具品牌排行榜前十名）</a></div><div class="list-footer"><div class="text-muted text-xs">育儿 ，<time class="d-inline-block">11-04</time></div></div></div></div></div><div class="hotimg"><div class="list-item list-overlay-content"><div class="media media-2x1"><a class="media-content" href="https://www.90558.cn/jiu/141101.html" target="_blank" style="background-image:url(https://www.90558.cn/zb_users/theme/quietlee/style/noimg/2.jpg)" title="哪些水最适合婴儿宝宝（母婴水和普通水的区别）"><span class="overlay"></span></a></div><div class="list-content"><div class="list-body"><a href="https://www.90558.cn/jiu/141101.html" class="list-title h-2x">哪些水最适合婴儿宝宝（母婴水和普通水的区别）</a></div><div class="list-footer"><div class="text-muted text-xs">育儿 ，<time class="d-inline-block">11-04</time></div></div></div></div></div><div class="hotimg"><div class="list-item list-overlay-content"><div class="media media-2x1"><a class="media-content" href="https://www.90558.cn/jiu/139422.html" target="_blank" style="background-image:url(https://www.90558.cn/zb_users/theme/quietlee/style/noimg/9.jpg)" title="远离宫颈癌(这些预防措施和疫苗知识不可不知)"><span class="overlay"></span></a></div><div class="list-content"><div class="list-body"><a href="https://www.90558.cn/jiu/139422.html" class="list-title h-2x">远离宫颈癌(这些预防措施和疫苗知识不可不知)</a></div><div class="list-footer"><div class="text-muted text-xs">育儿 ，<time class="d-inline-block">09-16</time></div></div></div></div></div></ul> </section><section class="widget wow fadeInDown" id="side_random"> <h3 class="widget-title"><i class="fa fa-side_random"></i><span>随便看看</span></h3> <div class="r-item-btn"><i class="fa fa-circle-o-notch"></i>换一换</div><ul class="widget-box side_random"><div class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/152588.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/6.jpg" alt="天津三代试管流程有哪些关键步骤(试管流程+治疗费用全解析)"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/152588.html" title="天津三代试管流程有哪些关键步骤(试管流程+治疗费用全解析)" target="_blank">天津三代试管流程有哪些关键步骤(试管流程+治疗费用全解析)</a></h4></div></div><div class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/163969.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/7.jpg" alt="促排改变基础卵泡数量少生育难,但得预防卵巢刺激过度"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/163969.html" title="促排改变基础卵泡数量少生育难,但得预防卵巢刺激过度" target="_blank">促排改变基础卵泡数量少生育难,但得预防卵巢刺激过度</a></h4></div></div><div class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/139146.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/8.jpg" alt="o型血孕妇如何避免溶血(引起新生儿abo溶血的原因分析)"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/139146.html" title="o型血孕妇如何避免溶血(引起新生儿abo溶血的原因分析)" target="_blank">o型血孕妇如何避免溶血(引起新生儿abo溶血的原因分析)</a></h4></div></div><div class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/152628.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/9.jpg" alt="沈阳做试管婴儿全部费用大约多少钱?详细费用清单与资金准备"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/152628.html" title="沈阳做试管婴儿全部费用大约多少钱?详细费用清单与资金准备" target="_blank">沈阳做试管婴儿全部费用大约多少钱?详细费用清单与资金准备</a></h4></div></div><div class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/163885.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/3.jpg" alt="怀孕4个月掌握正确睡姿助你做好梦,准妈妈了解下!"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/163885.html" title="怀孕4个月掌握正确睡姿助你做好梦,准妈妈了解下!" target="_blank">怀孕4个月掌握正确睡姿助你做好梦,准妈妈了解下!</a></h4></div></div><div class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/161895.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/9.jpg" alt="湖南第三代试管婴儿费用全面揭晓,单周期花销看这份清单就明白!"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/161895.html" title="湖南第三代试管婴儿费用全面揭晓,单周期花销看这份清单就明白!" target="_blank">湖南第三代试管婴儿费用全面揭晓,单周期花销看这份清单就明白!</a></h4></div></div></ul> </section> </aside> </div> <div class="listree-box"> <h3 class="listree-titles"><a class="listree-btn" title="展开">目录[+]</a></h3> <ul id="listree-ol" style="display:none;"></ul> </div> <script>//分享代码 function Share(pType){ var pTitle = "js实现复制文本（js脚本编写教程）"; //待分享的标题 var pImage = "https://www.90558.cn/zb_users/theme/quietlee/style/noimg/1.jpg"; //待分享的图片 var pContent = "介绍clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。安装通过n..."; //待分享的内容 var pUrl = window.location.href; //当前的url地址 var pObj = jQuery("div[class='yogo_hc']").find("h4"); if(pObj.length){ pTitle = pObj.text();} var pObj = jQuery("div[class='yogo_hcs']").find("em"); if(pObj.length){ pContent = pObj.text(); } var pObj = jQuery("div[class='con_cons']").find("img"); if(pObj.length){ pImage = jQuery("div[class='con_cons']").find("img",0).attr("src"); } shareys(pType, pUrl, pTitle,pImage, pContent); } function shareys(a, c, b, e, d) { switch (a) { case "sina": c = "//service.weibo.com/share/share.php?title\x3d" + encodeURIComponent("\u300c" + b + "\u300d" + d + "\u9605\u8bfb\u8be6\u60c5" + c) + "\x26pic\x3d" + e +"&appkey=&searchPic=true"; window.open(c); break; case "tqq": c = "//connect.qq.com/widget/shareqq/index.html?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" + encodeURIComponent(b) + "\x26pics\x3d" + e; window.open(c); break; case "qzone": c = "//sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url\x3d" + encodeURIComponent(c) + "\x26title\x3d" + encodeURIComponent(b) + "\x26site\x3d\x26pics\x3d" + encodeURIComponent(e) + "\x26desc\x3d" + encodeURIComponent(d) + "\x26summary\x3d" + encodeURIComponent(d); window.open(c) } }; </script><script src="https://www.90558.cn/zb_users/theme/quietlee/plugin/js/html2canvas.min.js"></script> <script src="https://www.90558.cn/zb_users/theme/quietlee/plugin/js/common.js"></script> <script> var poster_open = 'on'; var txt1 = '长按识别二维码查看详情'; var txt2 = '90558试婴网'; var comiis_poster_start_wlat = 0; var comiis_rlmenu = 1; var comiis_nvscroll = 0; var comiis_poster_time_baxt; $(document).ready(function(){ $(document).on('click', '.comiis_poster_a', function(e) { show_comiis_poster_ykzn(); }); }); function comiis_poster_rrwz(){ setTimeout(function(){ html2canvas(document.querySelector(".comiis_poster_box_img"), {scale:2,useCORS:true}).then(canvas => { var img = canvas.toDataURL("image/jpeg", .9); document.getElementById('comiis_poster_images').src = img; $('.comiis_poster_load').hide(); $('.comiis_poster_imgshow').show(); }); }, 100); } function show_comiis_poster_ykzn(){ if(comiis_poster_start_wlat == 0){ comiis_poster_start_wlat = 1; popup.open('<img src="https://www.90558.cn/zb_users/theme/quietlee/plugin/img/imageloading.gif" class="comiis_loading">'); var url = window.location.href.split('#')[0]; url = encodeURIComponent(url); var html = '<div id="comiis_poster_box" class="comiis_poster_nchxd">\n' + '<div class="comiis_poster_box">\n' + '<div class="comiis_poster_okimg">\n' + '<div style="padding:150px 0;" class="comiis_poster_load">\n' + '<div class="loading_color">\n' + ' <span class="loading_color1"></span>\n' + ' <span class="loading_color2"></span>\n' + ' <span class="loading_color3"></span>\n' + ' <span class="loading_color4"></span>\n' + ' <span class="loading_color5"></span>\n' + ' <span class="loading_color6"></span>\n' + ' <span class="loading_color7"></span>\n' + '</div>\n' + '<div class="comiis_poster_oktit">正在生成海报, 请稍候</div>\n' + '</div>\n' + '<div class="comiis_poster_imgshow" style="display:none">\n' + '<img src="" class="vm" id="comiis_poster_images">\n' + '<div class="comiis_poster_oktit">↑长按上图保存图片分享</div>\n' + '</div>\n' + '</div>\n' + '<div class="comiis_poster_okclose"><a href="javascript:;" class="comiis_poster_closekey"><img src="https://www.90558.cn/zb_users/theme/quietlee/plugin/img/poster_okclose.png" class="vm"></a></div>\n' + '</div>\n' + '<div class="comiis_poster_box_img">\n' + '<div class="comiis_poster_img"><div class="img_time">30<span>2024/04</span></div><img src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/8.jpg" class="vm" id="comiis_poster_image"></div>\n' + '<div class="comiis_poster_tita">js实现复制文本（js脚本编写教程）</div>\n' + '<div class="comiis_poster_txta">介绍clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且...</div><div class="comiis_poster_x guig"></div>\n' + '<div class="comiis_poster_foot">\n' + '<img src="https://www.90558.cn/zb_users/theme/quietlee/plugin/api.php?url='+url+'" class="kmewm fqpl vm">\n' + '<img src="https://www.90558.cn/zb_users/theme/quietlee/plugin/img/poster_zw.png" class="kmzw vm"><span class="kmzwtip">'+txt1+'<br>'+txt2+'</span>\n' + '</div>\n' + '</div>\n' + '</div>'; if(html.indexOf("comiis_poster") >= 0){ comiis_poster_time_baxt = setTimeout(function(){ comiis_poster_rrwz(); }, 5000); $('body').append(html); $('#comiis_poster_image').on('load',function(){ clearTimeout(comiis_poster_time_baxt); comiis_poster_rrwz(); }); popup.close(); setTimeout(function() { $('.comiis_poster_box').addClass("comiis_poster_box_show"); $('.comiis_poster_closekey').off().on('click', function(e) { $('.comiis_poster_box').removeClass("comiis_poster_box_show").on('webkitTransitionEnd transitionend', function() { $('#comiis_poster_box').remove(); comiis_poster_start_wlat = 0; }); return false; }); }, 60); } } } var new_comiis_user_share, is_comiis_user_share = 0; var as = navigator.appVersion.toLowerCase(), isqws = 0; if (as.match(/MicroMessenger/i) == "micromessenger" || as.match(/qq\//i) == "qq/") { isqws = 1; } if(isqws == 1){ if(typeof comiis_user_share === 'function'){ new_comiis_user_share = comiis_user_share; is_comiis_user_share = 1; } var comiis_user_share = function(){ if(is_comiis_user_share == 1){ isusershare = 0; new_comiis_user_share(); if(isusershare == 1){ return false; } } isusershare = 1; show_comiis_poster_ykzn(); return false; } } </script> </main> <footer class="site-footer footer"> <div class="site-info clearfix"> <div class="container"> <div class="footer-left"><!--底部左边--> <div class="footer-l-top clearfix"> </div> <div class="footer-l-btm"> <p class="top-text">Copyright<i class="fa fa-copyright"></i><a href="/">90558试婴网</a><a rel="nofollow" href="https://www.90558.cn/sitemap.txt" target="_blank">TXT地图</a><a rel="nofollow" href="https://www.90558.cn/sitemap.xml" target="_blank">sitemap</a><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?21e72b35562278a02a6ef735eebfca2e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> 安全运行<span id="iday"></span>天 <script>function siteRun(d){var nowD=new Date();return parseInt((nowD.getTime()-Date.parse(d))/24/60/60/1000)} document.getElementById("iday").innerHTML=siteRun("2008/08/08");</script></p> <p class="jubao"></p> <p class="btm-text"><a class="ico-ico" href="http://beian.miit.gov.cn" rel="nofollow" target="_blank" rel="nofollow" title="豫ICP备2021026018号"><img src="/zb_users/theme/quietlee/style/images/icp.png" alt="豫ICP备2021026018号">豫ICP备2021026018号</a> <span class="rt-times">运行时长：0.09秒</span><span class="rt-sql">查询信息：10 次</span></p> </div> </div> <div class="footer-right"><!--底部右边--> <div class="wxcode"><img alt="微信扫一扫" src="https://www.90558.cn/zb_users/upload/2026/09/202609031788396838221281.png"></div> </div> </div> </div> <div id="backtop" class="backtop"> <div class="bt-box top"><i class="fa fa-angle-up fa-2x"></i></div> <div class="bt-box bottom"><i class="fa fa-angle-down fa-2x"></i></div> </div> <script src="https://www.90558.cn/zb_users/theme/quietlee/script/jquery.pjax.js"></script> <script>var cookieDomain = "https://www.90558.cn/";</script> <script src="https://www.90558.cn/zb_users/theme/quietlee/script/zh_tw.js"></script> <script src="https://www.90558.cn/zb_users/theme/quietlee/script/custom.js?v=2026-05-08"></script> <script src="https://www.90558.cn/zb_users/theme/quietlee/script/jquery.lazy.js"></script> <script src="https://www.90558.cn/zb_users/theme/quietlee/script/wow.min.js"></script> <script src="https://www.90558.cn/zb_users/theme/quietlee/script/fancybox.js"></script> </footer></body> </html>