前段時間做了微信自定義分享的功能,分享出的頁面存在邀請碼在ios手機上複製失敗的問題,然而在PC端和安卓機上是沒有問題的。百度了一下,基本給出的解決方案是:ios不單純支持on,為點擊的元素添加空點擊事件:onclick="",眾說芸芸,但是試了下沒一個有用! 如果你複製的文本內容來自是input的 ...
前段時間做了微信自定義分享的功能,分享出的頁面存在邀請碼在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>