Clipboard深度實踐與採坑記錄
阿新 • • 發佈:2018-12-23
1.css禁止選擇導致IOS無法複製
body{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
2.下面這段程式碼在WINDOWS和安卓上 都可以實現一鍵複製,然而IOS10卻不行,點了沒有反應。
<div type="button" class="btn btn_copy_text" data-clipboard-text="要複製的內容" ></div> <script> //複製文字 var clip = new Clipboard('.btn_copy_text'); clip.on('success', function(e){ e.trigger.interHTML= "複製成功"; }); </script>
原來IOS需要型別為button作為按鈕元素才能進行一鍵複製。
<button type="button" class="btn btn_copy_text"data-clipboard-text="要複製的內容" ></button> <script> //複製文字 var clip = new Clipboard('.btn_copy_text'); clip.on('success', function(e){ e.trigger.interHTML= "複製成功"; }); </script>
3. 非同步資料複製類容為空
html
<li> <span>存款戶名:</span> <div type="text" id="banknum" class="li-style"></div> <!--<span id="copyBankNum" data-clipboard-action="copy" data-clipboard-target="div">複製</span>--> <button id="copyBankNum" data-clipboard-action="copy" data-clipboard-target="div">複製</button> </li> <li> <span>收款賬號:</span> <div type="text" id="bankname" class="li-style"></div> <!--<span id="copyBankName" data-clipboard-action="copy" data-clipboard-target="div">複製</span>--> <button id="copyBankName" data-clipboard-action="copy" data-clipboard-target="div">複製</button> </li>
js
$.ajax({ url: Global.sHost + "paymentList.php", type: "post", dataType: "json", async:false, //jsonp: "cb", data: { bankname: CP.Util.getPara('bankname') }, //1:返回按鈕跳轉到指定彩種頁面}, success: function(obj) { var code = obj.status; var R = obj.records; console.log(R); if (code == '0') { $("#bankid").html(R.bankid); $("#bankname").html(R.bankname + R.bank_branch); $("#banknum").html(R.banknum); $("#username").html(R.username); $("#banknum").data("banknum",R.banknum); $("#bankname").data("bankname",R.bankname); $("#username").data("username",R.username); } else { alert("獲取失敗") } } });
//和核心程式碼
var clipboard = new ClipboardJS('#copyBankNum',{
text:function(el){
console.log(el)
return $("#banknum").data("banknum");
}
});
clipboard.on('success', function(e) {
alert("複製成功"+e.text)
console.log(e);
});
clipboard.on('error', function(e) { alert("請選擇'拷貝'進行復制!") });