一.Document.execCommand()
1.移動(dòng)端復(fù)制
html結(jié)構(gòu)
<p class="gift-code hide">禮包碼：
<input class="gift-code-info" value="111111" readonly="text">
<span class="gift-code-code"></span>
<a href="#" id="1" class="gift-code-copy">復(fù)制</a>
<p>
js代碼
if(!isPC){
$('.helper-box').on('click','.gift-code-copy',function(){
var inputText=$(this).prev('.gift-code-code').prev('.gift-code-info');
var copyText=$(this).prev('.gift-code-code');
console.log(inputText.val(),copyText.text());
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
window.getSelection().removeAllRanges();
var range = document.createRange();
range.selectNode(copyText[0]);
util.console.log('range:', range);
window.getSelection().addRange(range);
var result = document.execCommand('copy');
if(result){
popup.toast('復(fù)制成功');
}else{
popup.toast('復(fù)制失敗');
}
window.getSelection().removeAllRanges();
}else{
inputText.select();
var result = document.execCommand('copy', false);
if(result){
popup.toast('復(fù)制成功');
}else{
popup.toast('復(fù)制失敗');
}
}
})
}
2.pc端的復(fù)制
注：IE僅支持IE9+
if(isPC){
$('.helper-box').on('click','.gift-code-copy',function(){
var inputText=$(this).prev('.gift-code-code').prev('.gift-code-info');
var copyText=$(this).prev('.gift-code-code');
console.log(inputText.val(),copyText.text());
inputText.select();
document.execCommand("Copy","false",null)
})
}
document.execCommand()文檔：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
document.execCommand()參考文章：
https://www.cnblogs.com/xhyu/p/5370111.html
二.jquery.zclip+flash
加載jQuery和zClip,地址請(qǐng)根據(jù)各自的存放地址做相應(yīng)修改。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
js實(shí)現(xiàn)點(diǎn)擊復(fù)制的代碼
<script>
$('#copyBtn').zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $('#link').val();
}
});
</script>
html
<div>
<input type="text" value="小松博客這個(gè)一個(gè)神奇的博客" id="link">
<span id="copyBtn">復(fù)制鏈接</span>
</div>
注意：
1.zclip由于在target可見之前不能注冊(cè)的問題，需要在顯示后調(diào)用此方法進(jìn)行注冊(cè)送漠；
2.不能跨域使用;
3.本地測(cè)試無法使用，需上傳到服務(wù)器无畔；
4.確保有Flash支持；
5.如果復(fù)制的內(nèi)容來自輸入框input吠冤，textarea等浑彰，copy對(duì)象使用：
copy:function(){
return $(xxx).val();
}
6.如果復(fù)制的內(nèi)容來自頁面元素div、p之類的拯辙，copy對(duì)象使用：
copy:$(xxx).text();
7.配置說明
path:swf的路徑(復(fù)制主要是用flash解決不同瀏覽器的復(fù)制)
copy:待復(fù)制的內(nèi)容, 可以是靜態(tài)內(nèi)容, 也可以 return 動(dòng)態(tài)內(nèi)容
beforeCopy:復(fù)制之前要做的function;
afterCopy:復(fù)制之后要做的function;
8.提供了三方法
show:$(selected).zclip('show'); //復(fù)制功能有效
hide:$(selected).zclip('hide'); //復(fù)制功能無效
remove:$(selected).zclip('remove'); //完全移除復(fù)制功能
三.clipboard.js
沒有Flash郭变，沒有框架
1.下載引入clipboard.js
2.實(shí)例化：new ClipboardJS( );
3.用法：可以復(fù)制、剪切涯保、從屬性復(fù)制文本诉濒；
復(fù)制：通過data-clipboard-target在觸發(fā)器元素中添加屬性來實(shí)現(xiàn)
可以定義data-clipboard-action屬性以指定是要copy還是cut內(nèi)容,如果省略此屬性，copy則默認(rèn)使用夕春。
剪切：cut操作僅適用于<input>或<textarea>元素未荒。
從屬性復(fù)制文本：
不需要另一個(gè)元素來復(fù)制其內(nèi)容〖爸荆可以data-clipboard-text在觸發(fā)器元素中包含一個(gè)屬性片排。
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
4.瀏覽器支持：IE9+寨腔，Chrome Opera Firefox Safari
復(fù)制的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clipboardjs復(fù)制</title>
</head>
<script src="../dist/clipboard.min.js"></script>
<body>
<!-- Target -->
<input id="foo" value="1111" type="text">
<!-- Trigger -->
<button class="btn" data-clipboard-action='copy' data-clipboard-target='#foo'>copy</button>
</body>
</html>
<script>
var clipboard=new ClipboardJS('.btn');
clipboard.on('success',function(e){
console.log(e);
})
clipboard.on('error',function(e){
console.log(e);
})
</script>
參考
下載zip文件
https://clipboardjs.com/
https://juejin.im/post/5a94f8eff265da4e9b593c29
