1. 程式人生 > >Clipboard深度實踐與採坑記錄

Clipboard深度實踐與採坑記錄

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("請選擇'拷貝'進行復制!") });