标签：function clipboard js 点击 复制 节点 文案

一。纯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 ($(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)
    });
}


如图：

标签：function,clipboard,js,点击,复制,节点,文案
来源： https://www.cnblogs.com/GGDong/p/13546478.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。