当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 通过textarea标签解决ClipboardJS在iphone复制失败问题

通过textarea标签解决ClipboardJS在iphone复制失败问题

2019年03月08日  | 移动技术网IT编程  | 我要评论

前段时间做了微信自定义分享的功能，分享出的页面存在邀请码在ios手机上复制失败的问题，然而在pc端和安卓机上是没有问题的。百度了一下，基本给出的解决方案是：ios不单纯支持on，为点击的元素添加空点击事件：onclick=""，众说芸芸，但是试了下没一个有用！

如果你复制的文本内容来自是input的值，你可以试着下面的方式：

  • 需要复制的内容不要放在input标签中，将标签换成textarea。
  • 设置textarea标签的属性 border:none; resize: none;将textarea边框及右边的三角下标隐藏，再通过line-height调整高度，使textarea达到和input标签一样的效果。

完整页面及效果演示地址：https://beebuylinks.igfd.group/invite.html?invitecode=88888888  （在浏览器中切换成手机模式）

部分代码

<div class="contentbox">
     <span class="myinvest">
           我的邀请码：
     </span>
     <span>
         <textarea id="id_text" type="text" class="number" value=""></textarea>
     </span>
     <button type="button" id="id_copy" class="copybtn" data-clipboard-target="#id_text" data-clipboard-action="copy">复制
     </button>
</div>
　　

<script>
        //从地址栏获取邀请码，并填充至指定元素中
        $(document).ready(function () {
            var invitecode = getparam("invitecode");
            $("#id_text").text(invitecode);
        });

        function getparam(name) {
            var search = document.location.search;
            var pattern = new regexp("[?&]" + name + "\=([^&]+)", "g");
            var matcher = pattern.exec(search);
            var items = null;
            if (null != matcher) {
                try {
                    items = decodeuricomponent(decodeuricomponent(matcher[1]));
                } catch (e) {
                    try {
                        items = decodeuricomponent(matcher[1]);
                    } catch (e) {
                        items = matcher[1];
                    }
                }
            }
            return items;
        }
</script>

<script type="text/javascript">
        var clipboard = new clipboardjs("#id_copy");
        clipboard.on("success", function (element) {//复制成功的回调
            alert('复制成功');
        });
        clipboard.on("error", function (element) {//复制失败的回调
            alert('复制失败，请手动选择');
        })
    </script>

 

　　

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网