首页 > 技术文章 > 复制-clipboardjs

jiajia-hjj 2021-04-11 13:03 原文

官网与文档

官方地址:https://clipboardjs.com/
GitHub地址:https://github.com/zenorocha/clipboard.js

引入

<script src="js/jquery.min.js"></script>
<script src="js/clipboard.min.js"></script>

HTML结构

<div class="code-con">
  <p class="code-txt">22222</p>
  <textarea id="input">select()只对input textarea有效</textarea>
  <a href="javascript:;" class="btn-copy" id="copyBtn">复制</a>
</div>

初始化

插件只兼容ie9+,低版本使用document.execCommand("Copy");实现复制功能

if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
   $("#copyBtn").on("click", function() {
       $(".code-txt").select();//如果不是input、textarea标签,则无效
       document.execCommand("Copy");
       alert("复制成功~");
   });
} else {
    var copyTxt=$('.code-txt').html();
    var clipboard = new ClipboardJS('#copyBtn',{
         text:function () {
            return copyTxt
         }
    });
    clipboard.on("success",function(e) {
      e.clearSelection();
      alert("复制成功");
    });
    clipboard.on("error",function(e) {
      e.clearSelection();
      alert("请手动选择复制!");
    });
}

官方DEMO

推荐阅读