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("復制成功！");
        });

 

如上所述，這樣就實現了復制多個內容到剪貼板的功能