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("请选择'拷贝'进行复制!")
            });