Solve the problem that ClipboardJS fails to copy on iphone through textarea tag

Some time ago, I did the function of wechat custom sharing. There was a problem that the invitation code of the shared page failed to be copied on ios mobile phone, but there was no problem on PC and Android. Baidu for a moment, the basic solution is: ios does not simply support on, for the click elements to add empty click event: onclick = "", said the crowd, but try next not a useful!

If you copy text from an input value, you can try the following:

  • Do not put the content to be copied in the input tag. Replace the tag with textarea.
  • Set the properties of the textarea label ﹣ border:none; ﹣ resize: none; hide the textarea border and the triangle subscript on the right, and then adjust the height through line height to make the textarea achieve the same effect as the input label.

Full page and effect demonstration address: https://beebuylinks.igfd.group/invite.html?inviteCode=88888888 (switch to mobile mode in browser)

Part of code

<div class="contentBox">
     <span class="myInvest">
           //My invitation code:
     </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">copy
     </button>
</div>
  

<script>
        //Get the invitation code from the address bar and fill it into the specified element
        $(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) {//Callback copied successfully
            alert('Replication success');
        });
        clipboard.on("error", function (element) {//Replication failed callbacks
            alert('Replication failed, please select manually');
        })
    </script>

Keywords: Javascript iOS Mobile Android

Added by nickminute on Mon, 02 Dec 2019 21:12:06 +0200