本人沒什麼基礎看了很久百度,不知道爲何在百度上問一個js實現copy功能會多出那麼多代碼出來,感受廢話一堆效果還沒能達到須要複製 的效果。javascript
然而在我看來,js複製代碼 無非就那麼幾句罷了。原生copy代碼:document.execCommand("Copy"); 就能夠達到複製的效果了,但我習慣用如下的方法:java
首先,必需要調用第三方【clipboard.min.js】包,有它才能js代碼才能實現複製功能,js包網上均可如下。這個如同jQuery同樣調用:<script src="../js/clipboard.min.js"></script> 便可,這是第一句代碼;瀏覽器
第二句代碼 對對象進行操做的方式方法有兩種能夠選擇:微信
(1)data-clipboard-action="copy"; 複製spa
(2)data-clipboard-action="cut"; 剪切對象
第三句代碼 copy或cut 的對象是誰:ip
data-clipboard-target=".abc" //這個對象能夠是 #id,也能夠類選擇器 .class ,也能夠是元素等等
get
第四句代碼 實例化 Clipboard 對象:input
var clipboard = new Clipboard(".abc"); 到這裏代碼就已經實現了複製的功能了io
-----------------------------------------------------------------------------------------------------------------------------------------
看看 案例代碼:
(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>