欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js复制粘贴,clipboard.js

程序员文章站 2022-07-13 13:09:04
...

背景:在一个后台系统中需要一键复制文章链接(如下图),需要自动复制链接给用户用,用了原生js document.ExecCommand("copy"),发现基本浏览器都不兼容.

解决:遂找第三方js,于是看到了clipboard;

js复制粘贴,clipboard.js

官网:https://clipboardjs.com/

官网上好几种用法,配合页面元素。但是都不是我要用的。我的需求是,点击按钮,复制表格内行内某个字段。于是我在点击时,虚拟添加一个button,然后绑定clipboard事件,自动触发点击事件,完成复制后移除刚添加的button元素。具体如下:

                var btn = document.createElement("button");
                btn.id = 'copyBtn';
                btn.setAttribute("data-clipboard-text", content);
                document.body.appendChild(btn);
                //实例化 ClipboardJS对象;
                var copyBtn = new ClipboardJS('#copyBtn');
                $('#copyBtn').click();
                copyBtn.on("success", function (e) {
                    // 复制成功
                    //alert(e.text);
                    e.clearSelection();
                });
                copyBtn.on("error", function (e) {
                    //复制失败;
                    console.log(e.action)
                });
                document.body.removeChild(btn);

 

相关标签: JS脚本