一。純js複製

有弊端：

1.想要複製圖片+文字比較麻煩

2.只能在input節點裡面複製文字

function copyContact(el) {
var oInput = document.createElement('input');//'textarea'
oInput.value = "666666666666";
document.body.appendChild(oInput);
oInput.select();
document.execCommand("Copy");
}

二。clipboard.js複製。中文官網：

也有些坑：

1.要複製的節點不能設為隱藏（如：display:none等，但是opacity:0就可以）

2.圖片的連結不能太長

3.點選複製前必須先new ClipboardJS() ，否則回出現點選兩次才能複製

本人的專案需求是：列表裡的不同商品根據介面返回的資料複製不同的文案(圖片+文字)

思路：滑鼠懸浮到 複製文案按鈕 時觸發事件，先 new ClipboardJS() ，並呼叫後臺介面返回 html 字串拼接到th:id="copyTxt+${item.goodRanking}" 裡，然後當 點選複製文案按鈕 時再複製th:id="copyTxt+${item.goodRanking}" 的內容

程式碼如下：

//本人專案是thymeleaf的，所以這裡的事件寫法可能不同
<div th:onmouseover="initCopyData(this,[[${item.gId}]],[[${item.goodRanking}]])"
     onclick="copywriting()">
    <div class="copy-btn">點選複製文案</div>
</div>

<div th:id="copyTxt+${item.goodRanking}"></div>

//必須先new ClipboardJS(),不然點選兩次才能複製
 
var clipboard;

//that：為要點選的複製文案按鈕
//gId：為介面引數
//copyId: 為要把資料拼接到哪個節點的標識
//初始化複製文案資料
function initCopyData(that, gId, copyId) {
    //單個商品返回資料相同，防止反覆呼叫介面
    if ($(that)[0].innerText.length == 6) {
        $.getJSON("xxxxxx", {goodsId: gId}, function (res) {
            var resData = res.data;
            if (res.code == "SUCCESS") {
                $(that).next().html(resData);
                //that為點選的節點，不然無效
                clipboard = new ClipboardJS(that, {
                    target: function (e) {
                        //重新選擇節點並返回要複製的值,節點不能設為隱藏(如：display: none等)，不然無效
                        return document.querySelector("#copyTxt" + copyId);
                    }
                });
            }
        });
    }
}

//點選複製文案
function copywriting() {
    clipboard.on("success", function (e) {
　　　　　//複製成功
        clipboard.destroy();
    });
    clipboard.on("error", function (e) {
　　　　 //複製失敗
        console.log(e)
    });
}


如圖：