最近在項(xiàng)目中遇到這樣一個(gè)需求：
點(diǎn)擊按鈕，將指定的URL/字符串 復(fù)制到剪貼板买羞，然后用戶可以粘貼到其他地方雹食。
方案一：zeroClipboard.js
github地址：https://github.com/zeroclipboard/zeroclipboard
復(fù)制原理：zeroClipboard利用透明的 flash 覆蓋在復(fù)制按鈕上，點(diǎn)擊 flash群叶，將復(fù)制內(nèi)容傳入到 flash 中街立，再通過 flash 把傳入的內(nèi)容寫到剪貼板上
首先想到這個(gè)插件的原因是，之前在PC端的項(xiàng)目中使用過赎离，兼容性很好，駕輕就熟梁剔，所以憾朴，先用它做了個(gè)demo
HTML
<input type="text" name="" id="iUrl" value="https://github.com/zeroclipboard/zeroclipboard">
<button id="copyUrlBtn">復(fù)制鏈接</button>
JAVASCRIPT
(function(){
var btn = document.getElementById('copyUrlBtn'),
text = document.getElementById('iUrl'),
zc = new ZeroClipboard(btn);
zc.on('beforecopy', function(e){
zc.setText(text.value);
});
btn.onclick = function(){
alert('已復(fù)制');
}
})();
使用zeroClipboard.js需要注意以下兩點(diǎn)：
1# ZeroClipboard.swf 和 ZeroClipboard.min.js 需在同一目錄結(jié)構(gòu)下， ZeroClipboard.swf無(wú)需調(diào)用灸拍，只需在頁(yè)面中引用ZeroClipboard.min.js 即可;
2# 測(cè)試復(fù)制功能需在服務(wù)器環(huán)境，可以是簡(jiǎn)單的本地服務(wù)器鸡岗，如：http://localhost:8000/xx
測(cè)試結(jié)果：
在PC端瀏覽器上測(cè)試，功能正常声登；但是在ios上,無(wú)論是QQ瀏覽器揣苏，還是Safari瀏覽器都無(wú)法實(shí)現(xiàn)復(fù)制功能。
可能由于Flash技術(shù)正被各大瀏覽器廠商冷落卸察，所以，截止到目前ZeroClipboard.js最新版合武，也無(wú)法實(shí)現(xiàn)在移動(dòng)端瀏覽器進(jìn)行文本復(fù)制涡扼。
方案二：Clipboard.js
** 官網(wǎng)地址**：https://clipboardjs.com/
雖然要求Safari版本在10以上，但是作者做了很好的優(yōu)雅降級(jí)：
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.
也就是說吃沪，Safari版本是10以上的汤善，可以直接成功復(fù)制；如果是版本小于10巷波，可以通過如下代碼提示用戶手動(dòng)復(fù)制：
clipboard.on('error', function(e) {
alert('請(qǐng)選擇“拷貝”進(jìn)行復(fù)制!')
});
Safari版本在10以下的效果：
在 alert('請(qǐng)選擇“拷貝”進(jìn)行復(fù)制!') 之后萎津，待復(fù)制的文字會(huì)自動(dòng)選中卸伞，然后彈出系統(tǒng)本身的tooltip
效果如下：
demo：
//ClipboardJS.isSupported() //--------這句為：是否兼容
var clipboard = new Clipboard('.btn');
//優(yōu)雅降級(jí):safari 版本號(hào)>=10,提示復(fù)制成功;否則提示需在文字選中后抹镊，手動(dòng)選擇“拷貝”進(jìn)行復(fù)制
clipboard.on('success', function(e) {
alert('復(fù)制成功!')
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('請(qǐng)選擇“拷貝”進(jìn)行復(fù)制!')
//嘗試去掉alert，能彈出系統(tǒng)的“拷貝”工具荤傲，但是需要點(diǎn)擊兩次按鈕才能彈出垮耳，具體原因還不清楚，參考上圖遂黍。有人說可以試一下在觸發(fā)的地方寫一個(gè)空點(diǎn)擊事件, onclick="" 因?yàn)閕os不單純支持on事件
});
注：參考jq在ios的on事件失效
https://blog.csdn.net/qq_21119773/article/details/53996514
在ios的瀏覽器中出現(xiàn)一下情況：
綁定document终佛，on事件失效
$(document).on('click','#weixin_btn,#close_box',function(){
})
解決方法1铃彰，最后加一行代碼牙捉，如下
$("body").children().click(function(){})
-============------++++++++++++
解決方法2邪铲，
綁定到id（非document）上带到，on正常使用
$("#orderlist").on('click','.pingjia',function(e){
e.stopPropagation();
e.preventDefault();
})
+++++++++++ 個(gè)人參考 ++++++++++++++++++
<script type="text/javascript">
//復(fù)制
var clipboard = new ClipboardJS('#btnClipboard', {
target: function() { return document.getElementById('spnYXDHXAccno');}
});
clipboard.on('success', function(e) { NotyGenerate("success", "bottomCenter", "1500", "復(fù)制成功揽惹！"); });
clipboard.on('error', function(e) { });
$('.panel-warning').find('li').on('click',function() {
var _this = $(this).index();
$(this).addClass('panel-table').siblings().removeClass('panel-table');
$('.panel-cons').find('.panel-con').eq(_this).fadeIn(100).siblings().fadeOut(100);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
//讀取瀏覽器信息
nBrowserType = 5; //其它瀏覽器
if (IsIphoneOS()) {
nBrowserType = 2; //Iphone 瀏覽器
if (IsWeiXin()) nBrowserType = 1; //Iphone 微信瀏覽器
}
else if (IsAndroid()) {
nBrowserType = 4; //Android 瀏覽器
if (IsWeiXin()) nBrowserType = 3; //Android 微信瀏覽器
}
$("#hfBrowserType").val(nBrowserType);
$("#hfBrowserValue").val(navigator.userAgent.toLowerCase());
});
$('#btnSubmit').click(function () { return jForm_Check(); });
function jForm_Check() {
if (!/^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/.test($("#tbMoney").val())) {
NotyGenerate("warning", "bottomCenter", "1500", "請(qǐng)輸入正確的金額锹漱！");
$("#tbMoney").trigger("select");
return false;
}
if (Number($("#tbMoney").val()) <= 0) {
NotyGenerate("warning", "bottomCenter", "1500", "請(qǐng)輸入大于 0 的金額哥牍！");
$("#tbMoney").trigger("select");
return false;
}
}
</script>
參考鏈接：
1.官方https://clipboardjs.com/（我使用火狐瀏覽器打開快點(diǎn)---添加了Decentraleyes這個(gè)組件）
2.https://blog.csdn.net/oaa608868/article/details/53539890
3.https://www.huoduan.com/clipboardjs.html
4.https://blog.csdn.net/ximenxiafeng/article/details/54632496
5.https://blog.csdn.net/hzmumu/article/details/79271464
6.http://www.reibang.com/p/3f8867de041e（中的評(píng)論：對(duì)于不兼容ios的, 可以試一下在觸發(fā)的地方寫一個(gè)空點(diǎn)擊事件, onclick="" 因?yàn)閕os不單純支持on事件）。
