一。純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復制。中文官網：http://www.clipboardjs.cn/
也有些坑：
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 ($("#copyTxt" + copyId)[0].innerText.length <= 0) {
$.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)
});
}
如圖：
