标签解决ClipboardJS在iphone复制失败问题"/>
通过textarea标签解决ClipboardJS在iphone复制失败问题
前段时间做了微信自定义分享的功能,分享出的页面存在邀请码在ios手机上复制失败的问题,然而在PC端和安卓机上是没有问题的。百度了一下,基本给出的解决方案是:ios不单纯支持on,为点击的元素添加空点击事件:οnclick="",众说芸芸,但是试了下没一个有用!
如果你复制的文本内容来自是input的值,你可以试着下面的方式:
- 需要复制的内容不要放在input标签中,将标签换成textarea。
- 设置textarea标签的属性 border:none; resize: none;将textarea边框及右边的三角下标隐藏,再通过line-height调整高度,使textarea达到和input标签一样的效果。
完整页面及效果演示地址:/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>
转载于:.html
更多推荐
通过textarea标签解决ClipboardJS在iphone复制失败问题
发布评论