介绍

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/7.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/136435.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/4.jpg" alt="太原市正规试管供卵机构排名(盘点2025太原最好的赠卵试管机构)" title="太原市正规试管供卵机构排名(盘点2025太原最好的赠卵试管机构)"></i> <h3>太原市正规试管供卵机构排名(盘点2025太原最好的赠卵试管机构)</h3> <p><b class="datetime">2025-07-12</b><span class="viewd">1 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/136434.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/1.jpg" alt="如何测算自己的排卵期(排卵期出血是正常的吗)" title="如何测算自己的排卵期(排卵期出血是正常的吗)"></i> <h3>如何测算自己的排卵期(排卵期出血是正常的吗)</h3> <p><b class="datetime">2025-07-12</b><span class="viewd">4 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/136433.html"><i class="pic-thumb"><img class="lazy" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/2.jpg" alt="海口哪个医院做试管成功率高(私立医院做试管婴儿靠谱吗)" title="海口哪个医院做试管成功率高(私立医院做试管婴儿靠谱吗)"></i> <h3>海口哪个医院做试管成功率高(私立医院做试管婴儿靠谱吗)</h3> <p><b class="datetime">2025-07-12</b><span class="viewd">5 人在看</span></p> </a></li> <li class="readnew"><a href="https://www.90558.cn/jiu/136432.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">2025-07-12</b><span class="viewd">7 人在看</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/124582.html" target="_blank" style="background-image:url(https://www.90558.cn/zb_users/cache/thumbs/64fcaa781c4aba54623069398dbc0c17-265-200-0.png)"><span class="overlay"></span></a></div><div class="list-content"><div class="list-body"><a href="https://www.90558.cn/jiu/124582.html" class="list-title h-2x">2025蛇年新版清宫图预测表公布(容易怀女孩的时间介绍)</a></div><div class="list-footer"><div class="text-muted text-xs">百科 ，<time class="d-inline-block">08-23</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/125760.html" target="_blank" style="background-image:url(https://www.90558.cn/zb_users/theme/quietlee/style/noimg/5.jpg)"><span class="overlay"></span></a></div><div class="list-content"><div class="list-body"><a href="https://www.90558.cn/jiu/125760.html" class="list-title h-2x">2025年送子观音会给哪些生肖送子(属猴蛇龙狗虎要抓住机会哦)</a></div><div class="list-footer"><div class="text-muted text-xs">育儿 ，<time class="d-inline-block">09-18</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/124633.html" target="_blank" style="background-image:url(https://www.90558.cn/zb_users/cache/thumbs/52e5c735e4565c79adc7e7e45ecbe505-265-200-0.png)"><span class="overlay"></span></a></div><div class="list-content"><div class="list-body"><a href="https://www.90558.cn/jiu/124633.html" class="list-title h-2x">2025年怀孕清宫图表(正版)分享已公布清宫表的计算方式</a></div><div class="list-footer"><div class="text-muted text-xs">百科 ，<time class="d-inline-block">08-23</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"><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/136379.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/8.jpg" alt="石家庄市妇产医院三代试管婴儿费用多少（石家庄市妇产医院试管婴儿检查单）"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/136379.html" title="石家庄市妇产医院三代试管婴儿费用多少（石家庄市妇产医院试管婴儿检查单）" target="_blank">石家庄市妇产医院三代试管婴儿费用多少（石家庄市妇产医院试管婴儿检查单）</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/135958.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/1.jpg" alt="南昌齐鲁医院三代试管多少钱(南昌第三带试管婴可要男女吗)"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/135958.html" title="南昌齐鲁医院三代试管多少钱(南昌第三带试管婴可要男女吗)" target="_blank">南昌齐鲁医院三代试管多少钱(南昌第三带试管婴可要男女吗)</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/136274.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/5.jpg" alt="程潇胸多大尺寸(跳舞胸大到什么时候程度)"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/136274.html" title="程潇胸多大尺寸(跳舞胸大到什么时候程度)" target="_blank">程潇胸多大尺寸(跳舞胸大到什么时候程度)</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/136253.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/136253.html" title="泰国试管婴儿成功率是多少试管婴儿（泰国试管婴儿费用）" target="_blank">泰国试管婴儿成功率是多少试管婴儿（泰国试管婴儿费用）</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/136344.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/4.jpg" alt="避孕药的使用要注意什么(不想怀孕教你三招)"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/136344.html" title="避孕药的使用要注意什么(不想怀孕教你三招)" target="_blank">避孕药的使用要注意什么(不想怀孕教你三招)</a></h4></div></li><li class="r-item"><div class="r-item-wrap"><a class="r-thumb" href="https://www.90558.cn/jiu/135227.html" target="_blank"><img width="480" height="300" src="https://www.90558.cn/zb_users/theme/quietlee/style/noimg/1.jpg" alt="多囊卵巢患者必须做宫腔镜检查吗(宫腔镜检查对身体伤害大吗)"></a><h4 class="r-title"><a href="https://www.90558.cn/jiu/135227.html" title="多囊卵巢患者必须做宫腔镜检查吗(宫腔镜检查对身体伤害大吗)" target="_blank">多囊卵巢患者必须做宫腔镜检查吗(宫腔镜检查对身体伤害大吗)</a></h4></div></li></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或任何重量级框架的粘贴*插件，并且它没有任何非常复杂的配置，这也是它存在的原因。安装通过np..."; //待分享的内容 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/9.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>2023<a href="/">90558试婴网</a><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8275440270131250"<html> <head> <meta name="baidu-site-verification" content="codeva-jhf5kKmgaP" /> <title>My title</title> </head> <body> page contents </body> </html> crossorigin="anonymous"></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">本站采用创作共用版权 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" target="_blank" rel="nofollow">CC BY-NC-SA 3.0 CN</a> 许可协议，转载或复制请注明出处</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.465秒</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/2024/02/202402211708489118483914.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=2025-06-30"></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>