JS代碼實現複製功能

本人沒什麼基礎看了很久百度，不知道爲何在百度上問一個js實現copy功能會多出那麼多代碼出來，感受廢話一堆效果還沒能達到須要複製 的效果。

然而在我看來，js複製代碼 無非就那麼幾句罷了。原生copy代碼：document.execCommand("Copy");  就能夠達到複製的效果了，但我習慣用如下的方法：

首先，必需要調用第三方【clipboard.min.js】包，有它才能js代碼才能實現複製功能，js包網上均可如下。這個如同jQuery同樣調用：<script src="../js/clipboard.min.js"></script> 便可，這是第一句代碼；

第二句代碼 對對象進行操做的方式方法有兩種能夠選擇：

（1）data-clipboard-action="copy"；    複製

（2）data-clipboard-action="cut"；     剪切

第三句代碼 copy或cut 的對象是誰：

data-clipboard-target=".abc"      //這個對象能夠是 #id，也能夠類選擇器  .class ，也能夠是元素等等

第四句代碼 實例化 Clipboard 對象：

var clipboard = new Clipboard(".abc");  到這裏代碼就已經實現了複製的功能了

-----------------------------------------------------------------------------------------------------------------------------------------

看看 案例代碼：

（1）純文本copy：textarea

<script type="text/javascript" src="../js/clipboard.min.js"></script>

<script type="text/javascript">

　　function copyUrl2(){

　　　　var Url2=document.getElementById("biao1");//獲取文本框id

　　　　Url2.select(); // 選擇對象用戶定義的代碼區域

　　　　document.execCommand("Copy"); //原生copy方法執行瀏覽器複製命令

　　　　alert("內容複製成功，去粘貼看看！"); //彈窗

　　　　//window.location.href = 'weixin://';  //打開手機微信

　　}

</script>

<textarea cols="27" rows="5" id="biao1">這裏面的文本內容被複制 </textarea>

<input type="button" onClick="copyUrl2()" value="點擊複製Copy" /> 

 

-------------------------------------------------------------------------------------------------

（2）非純文本內容的某個標籤：span例舉

<span id="btn" class="abc" data-clipboard-action="copy" data-clipboard-target=".abc">這裏能夠點擊複製</span>

點擊內容直接執行js代碼：

<script type="text/javascript" src="../js/clipboard.min.js"></script>

<script type="text/javascript">

var clipboard = new Clipboard("#btn"); //實例化對象

//複製成功執行的回調

clipboard.on('success', function(e) {

　　console.log(e); //返回值類型給控制檯 沒什麼用 能夠註釋掉

　　alert("複製成功，去粘貼看看吧！");

　　//window.location.href = 'weixin://';  //打開手機微信

});

//複製失敗執行的回調

clipboard.on('error', function(e) {

　　alert("複製失敗！請手動複製")

});

</script>

 ---------------------------------------------------------------------

(3).我比較喜歡使用下面這種傳參的方式，

<samp id="target" style="font-size: 15pt;color: red;" >85687</samp>
<button id="biao2" data-clipboard-action="copy" data-clipboard-target="#target" onclick='copy("#biao2")'>這裏能夠點擊複製</button>

 

<script type="text/javascript" src="../js/clipboard.min.js"></script>

 

<script type="text/javascript">

function copy(id) {
　　var clipboard = new Clipboard(id); 　　clipboard.on('success', function(e){ 　　　　alert("複製成功，去粘貼試試吧！"); 　　　　//可執行其餘代碼操做 　　}); 　　clipboard.on('error', function(e){ 　　　　alert("複製失敗！請手動複製") 　　}); }</script>