JS 实现复制一个或多个内容到剪贴板

需要实现的功能：点击button，复制如下值到剪贴板，

链接：http://192.168.0.203:7083/share/nRrDLqBBJFjXQ5lk9Nv60GV6 提取码: 3NmH

 

 

 

 

常用的方法是：document.execCommand('copy')

<input id='input_url' type="text">

var input = $('#input_url');
input.select();
document.execCommand("Copy");

 

用这个方法有三点需要注意否则将会失效

1、input框不能有disabled属性
2、根据第一条扩展，input的width || height 不能为0；
3、input框不能有hidden属性

普通的复制功能到这里就结束了 

 

 

但是需求上要将两个input框中的值拼接成一个字符串，然后放入剪贴板，所以上面的方法不太适用。最后想了一种取巧的方法

再增加一个input框，用来存放拼接好的字符串，只需要让这个input框不显示可复制就可以了

给input框设置以下两个属性

opacity透明度（这样就看不到了，但是有可能还占用了一些空间）

position: absolute;（绝对定位）

链接：<input type="text" id="linkUrl">
提取码：<input type="text" id="extractCode">
<input id='inputCopyText' style='opacity:0;position:absolute;' type="text">
<button id="copyLink">复制链接及提取码</button>

    　　$("#copyLink").click(function(){
            $('#inputCopyText').val("链接："+$('#linkUrl').val()+" 提取码: "+$('#extractCode').val());
            var Url2 = document.getElementById("inputCopyText");
            Url2.select();
            document.execCommand("Copy"); // 执行浏览器复制命令
            alert("复制成功！");
        });

 

如上所述，这样就实现了复制多个内容到剪贴板的功能