最近做手機端H5網頁裡面有個活動：點選按鈕複製邀請碼。查過一些方法，在電腦端可以複製貼上，一放在手機上面開啟網頁就不能複製貼上了。

直接進入正題

使用開源專案 clipboard.js，

可以通過script標籤引入

也可以通過npm安裝，npm install clipboard.js --save-dev。

這個外掛複製的物件必須是input 或者 textarea 裡面的值。所以說你要是想複製p標籤或者其他文字 必須先設定一個input或者textarea作為中間過渡。html中寫一個textarea標籤，樣式設定： opacity:0; z-index=-1;這樣就可使隱藏這個沒用的容器。

下面貼程式碼：

  <div class="code-box">
      <p class="code-num" id="codeNum">AE86123456</p>
      <textarea id="input"></textarea>
      <p class="code-btn copy" id="codeBtn" data-clipboard-target="#input">複製邀請碼</p>
    </div>

js程式碼：

$(".code-btn").click(function(){
      let e = document.getElementById("codeNum").innerText;
      let t = document.getElementById("input");
      t.value = e;
      //例項化clipboard
      var clipboard = new ClipboardJS('#codeBtn');
      clipboard.on("success", function(e){
        $(".alertMsg").html("複製成功！");
        $(".modal-bg").css("display", "block");
        e.clearSelection();
      });
      clipboard.on("error", function(e){
        $(".alertMsg").html("請選擇“拷貝”進行復制!");
        $(".modal-bg").css("display", "block");
      });
    });
 

總結專案中實際遇到的問題：

    剛開始查資料用的例項方法是   

var clipboard = new Clipboard('#codeBtn');

然後控制檯會報錯  Uncaught TypeError: Illegal constructor

然後查了看了官方程式碼後，貌似v2.0 以後不能用這個方法例項化了，必須給後面加個大寫的JS。

新的例項化方法

var clipboard = new ClipboardJS('#codeBtn');

OK，這個問題就解決了。

最後公司測試又提出，某些安卓手機自帶的瀏覽器點選這個按鈕並沒有反應，最後本人也去試了，貌似真的沒反應。最後查了一下官方文件，發現這個開源專案也存在一些缺陷，主流瀏覽器大都支援，並且還要高版本才行。安卓手機自帶的瀏覽器不能實現這個問題，最後不了了之，有大手子碰到類似問題，或者已經解決了的可以來交流交流。