前段時間做了微信自定義分享的功能，分享出的頁面存在邀請碼在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>
