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>

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

            });

巴特西

Clipboard深度实践与采坑记录

最新文章

热门文章