介绍

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

安装

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

npm install clipboard –save

2.引入js

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

使用

示例


 
 
 
 
 
 
 
 
 
 
 
 复制
 
 
 
 new ClipboardJS(".btn");

js实现复制文本（js脚本编写教程）

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

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

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><img decoding="async" alt="js实现复制文本（js脚本编写教程）" src="//img.quwanw.cn/upload/2022/01/20220106100248164143456874910.jpg"> <img decoding="async" alt="js实现复制文本（js脚本编写教程）" src="//img.quwanw.cn/upload/2022/01/20220106100248164143456820128.jpg"> </p> <h1>备注</h1> <p>如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级</p> <h1>提供Chrome和Firefox的扩展</h1> <p>一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。</p> <div class="entry-readmore"><div class="entry-readmore-btn"></div></div> <div class="entry-copyright"><p>版权声明：本站所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 1339397536@qq.com 举报，一经查实，本站将立刻删除。</p></div> </div> <div class="entry-tag"><a href="https://www.quwanw.cn/tag/167" rel="tag">js</a></div> <div class="entry-action"> <div class="btn-zan" data-id="38024"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div> </div> <div class="entry-bar"> <div class="entry-bar-inner clearfix"> <div class="author pull-left"> <a data-user="11" target="_blank" href="https://www.quwanw.cn/qu/author/-8" class="avatar j-user-card"> <img alt='林凡' src='https://cravatar.cn/avatar/?s=60&d=mm&r=g' srcset='https://cravatar.cn/avatar/?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo avatar-default' height='60' width='60' decoding='async'/><span class="author-name">林凡</span> </a> </div> <div class="info pull-right"> <div class="info-item meta"> <a class="meta-item" href="#comments"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i> <span class="data">0</span></a> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="38024" data-qrcode="https://www.quwanw.cn/qu/38024.html"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报</a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a> </div> </div> </div> </div> </div> <div class="wpcom_myimg_wrap __single_2"><script>arc_end();</script></div> <div class="entry-related-posts"> <h3 class="entry-related-title">相关推荐</h3><ul class="entry-related cols-3 post-loop post-loop-list"><li class="item"> <a href="https://www.quwanw.cn/qu/18287.html" target="_blank" rel="bookmark"> 小李子颜值巅峰图片（小李子最帅的图片高清） </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/44023.html" target="_blank" rel="bookmark"> 小说作家排行榜中国十大网络小说作家 </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/20399.html" target="_blank" rel="bookmark"> 苦笋陆游翻译和赏析（苦笋陆游原文翻译） </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/18694.html" target="_blank" rel="bookmark"> 关于春天的唯美句子（描写春天的好句摘抄） </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/35751.html" target="_blank" rel="bookmark"> 处级干部退休年龄规定（2021年处级干部退休年龄规定） </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/34952.html" target="_blank" rel="bookmark"> 教师职业道德规范心得体会短篇（做一个幸福教师的心得体会） </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/42838.html" target="_blank" rel="bookmark"> 杭州十大高楼排行榜杭州在建十大最高楼 </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/23267.html" target="_blank" rel="bookmark"> 赠别元十八协律六首翻译（赠别元十八协律六首翻译赏析） </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/7655.html" target="_blank" rel="bookmark"> 动漫绳艺,你特别特别喜欢的动漫人物是谁 </a> <span class="date">2023-02-10</span> </li><li class="item"> <a href="https://www.quwanw.cn/qu/20361.html" target="_blank" rel="bookmark"> 曾子之妻之市文言文翻译（曾子杀彘文言文翻译和注释） </a> <span class="date">2023-02-10</span> </li></ul> </div> <div id="comments" class="entry-comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">发表回复 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/qu/38024.html#respond" style="display:none;"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-close"></use></svg></i></a></small></h3><div class="comment-form"><div class="comment-must-login">请登录后评论...</div><div class="form-submit"><div class="form-submit-text pull-left"><a href="https://www.quwanw.cn/wp-login.php">登录</a>后才能评论</div> <button name="submit" type="submit" id="must-submit" class="btn btn-primary btn-xs submit">提交</button></div></div> </div> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_post_tabs"> <div class="post-tabs-hd tab-has-title"> <h3 class="widget-title">推荐</h3> <div class="post-tabs-hd-inner post-tabs-2"> <div class="post-tabs-item j-post-tab active"> 最新 </div> <div class="post-tabs-item j-post-tab"> 热门 </div> </div> </div> <ul class="post-tabs-list j-post-tab-wrap active"> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/284180.html" title="龙口旅游攻略"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://img.quwanw.cn/2024/06/1770170476890944.jpg!/both/480x300" width="480" height="300" alt="龙口旅游攻略"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/284180.html" title="龙口旅游攻略">龙口旅游攻略</a></p> <p class="item-date">2026-02-04</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/284179.html" title="平湖旅游攻略"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://img.quwanw.cn/2024/06/1770170452482652.jpg!/both/480x300" width="480" height="300" alt="平湖旅游攻略"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/284179.html" title="平湖旅游攻略">平湖旅游攻略</a></p> <p class="item-date">2026-02-04</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/284178.html" title="到成都旅游攻略"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://img.quwanw.cn/2024/06/1770170414708287.jpg!/both/480x300" width="480" height="300" alt="到成都旅游攻略"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/284178.html" title="到成都旅游攻略">到成都旅游攻略</a></p> <p class="item-date">2026-02-04</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/284177.html" title="栾川旅游攻略"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://img.quwanw.cn/2024/06/1770170386508870.jpg!/both/480x300" width="480" height="300" alt="栾川旅游攻略"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/284177.html" title="栾川旅游攻略">栾川旅游攻略</a></p> <p class="item-date">2026-02-04</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/284176.html" title="📌 给第一次认真规划四天行程的人几条私心建议"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://img.quwanw.cn/2024/06/1770170356637155.jpg!/both/480x300" width="480" height="300" alt="📌 给第一次认真规划四天行程的人几条私心建议"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/284176.html" title="📌 给第一次认真规划四天行程的人几条私心建议">📌 给第一次认真规划四天行程的人几条私心建议</a></p> <p class="item-date">2026-02-04</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/284175.html" title="自驾山东旅游攻略"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://img.quwanw.cn/2024/06/1770170328176390.jpg!/both/480x300" width="480" height="300" alt="自驾山东旅游攻略"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/284175.html" title="自驾山东旅游攻略">自驾山东旅游攻略</a></p> <p class="item-date">2026-02-04</p> </div> </li> </ul> <ul class="post-tabs-list j-post-tab-wrap"> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/44729.html" title="全是肉肉的黄文辣文np 高质量黄文np推荐"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="//img.quwanw.cn/upload/2022/09/20220927135951338.jpg!/both/480x300" width="480" height="300" alt="全是肉肉的黄文辣文np 高质量黄文np推荐"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/44729.html" title="全是肉肉的黄文辣文np 高质量黄文np推荐">全是肉肉的黄文辣文np 高质量黄文np推荐</a></p> <p class="item-date">2023-02-10</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/44865.html" title="繁星短诗100首繁星短诗大全一到一百首"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="//img.quwanw.cn/upload/2022/10/20221019134534378.png!/both/480x300" width="480" height="300" alt="繁星短诗100首繁星短诗大全一到一百首"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/44865.html" title="繁星短诗100首繁星短诗大全一到一百首">繁星短诗100首繁星短诗大全一到一百首</a></p> <p class="item-date">2023-02-10</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/45121.html" title="车开得很多的原耽推荐原耽车多肉推荐书单"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="//img.quwanw.cn/upload/2022/11/20221121195135849.png!/both/480x300" width="480" height="300" alt="车开得很多的原耽推荐原耽车多肉推荐书单"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/45121.html" title="车开得很多的原耽推荐原耽车多肉推荐书单">车开得很多的原耽推荐原耽车多肉推荐书单</a></p> <p class="item-date">2023-02-10</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/45092.html" title="好看的古言po文推荐成年人不能错过的古言po文"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="//img.quwanw.cn/upload/2022/11/20221117113706462.jpg!/both/480x300" width="480" height="300" alt="好看的古言po文推荐成年人不能错过的古言po文"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/45092.html" title="好看的古言po文推荐成年人不能错过的古言po文">好看的古言po文推荐成年人不能错过的古言po文</a></p> <p class="item-date">2023-02-10</p> </div> </li> <li class="item"> <div class="item-content item-no-thumb"> <p class="item-title"><a href="https://www.quwanw.cn/qu/36010.html" title="麻生希最好看3部作品（麻生希番号资源分享）">麻生希最好看3部作品（麻生希番号资源分享）</a></p> <p class="item-date">2023-02-10</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.quwanw.cn/qu/1338.html" title="男主吊大的糙汉宠文（全是肉很细致的糙汉文古言）"> <img class="j-lazy" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="//img.quwanw.cn/upload/2021/08/202108271630016500251532.png!/both/480x300" width="480" height="300" alt="男主吊大的糙汉宠文（全是肉很细致的糙汉文古言）"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.quwanw.cn/qu/1338.html" title="男主吊大的糙汉宠文（全是肉很细致的糙汉文古言）">男主吊大的糙汉宠文（全是肉很细致的糙汉文古言）</a></p> <p class="item-date">2023-02-10</p> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-col-wrap footer-with-none"> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"><li id="menu-item-137375" class="menu-item menu-item-137375"><a href="https://www.quwanw.cn/wenda">问答</a></li> <li id="menu-item-137377" class="menu-item menu-item-137377"><a href="https://www.quwanw.cn/contact">联系</a></li> </ul> <div class="copyright"> <p>Copyright © 2023 <a href="https://www.quwanw.cn"><strong>趣玩号</strong></a> www.quwanw.cn 版权所有 <a href="http://www.beian.miit.gov.cn" target="_blank" rel="nofollow noopener">滇ICP备2022006985号-8</a></p> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-0 action-pos-0" style="bottom:20%;"> <div class="action-item j-share"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> </div> <div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/justnews/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" id="main-js-extra"> /* <![CDATA[ */ var _wpcom_js = {"webp":"","ajaxurl":"https://www.quwanw.cn/wp-admin/admin-ajax.php","theme_url":"https://www.quwanw.cn/wp-content/themes/justnews","slide_speed":"5000","is_admin":"0","js_lang":{"copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"lightbox":"1","post_id":"38024","poster":{"notice":"\u8bf7\u957f\u6309\u4fdd\u5b58\u56fe\u7247\uff0c\u5c06\u5185\u5bb9\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"482","fixed_sidebar":"1","dark_style":"0","font_url":"//googlefonts.wp-china-yes.net/css2?family=Noto+Sans+SC:wght@400;500&display=swap"}; //# sourceURL=main-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://www.quwanw.cn/wp-content/themes/justnews/js/main.js?ver=6.13.2" id="main-js"></script> <script type="text/javascript" src="https://www.quwanw.cn/wp-content/themes/justnews/themer/assets/js/icons-2.7.1.js?ver=6.13.2" id="wpcom-icons-js"></script> <script type="text/javascript" src="https://www.quwanw.cn/wp-includes/js/comment-reply.min.js?ver=6.9" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script> <script type="text/javascript" id="wp-postviews-cache-js-extra"> /* <![CDATA[ */ var viewsCacheL10n = {"admin_ajax_url":"https://www.quwanw.cn/wp-admin/admin-ajax.php","nonce":"90210e3a48","post_id":"38024"}; //# sourceURL=wp-postviews-cache-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://www.quwanw.cn/wp-content/plugins/wp-postviews/postviews-cache.js?ver=1.68" id="wp-postviews-cache-js"></script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "@id": "https://www.quwanw.cn/qu/38024.html", "url": "https://www.quwanw.cn/qu/38024.html", "headline": "js实现复制文本（js脚本编写教程）", "image": ["http://img.quwanw.cn/upload/2022/01/20220106100247164143456718391.png","http://img.quwanw.cn/upload/2022/01/20220106100247164143456713657.png","http://img.quwanw.cn/upload/2022/01/20220106100248164143456874910.jpg"], "description": "介绍 clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。安装通过npm安装（或者直接下载js文件引...", "datePublished": "2023-02-10T16:57:29", "dateModified": "2023-02-10T16:57:29", "author": {"@type":"Person","name":"林凡","url":"https://www.quwanw.cn/qu/author/-8"} } </script> <script>jQuery(function ($) { setup_share(1); });</script> </body> </html>