博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。
【摘要】昨天弄了一整天的 js 复制文本兼容性问题，具体来说就是在 PC 端、IOS 手机、 Android 手机端中相互不兼容的问题，网上提供了很多种方法，但是都没有能够解决兼容性问题，本文记录一下最后找到的两种解决办法。
首先说明一下情况： js 复制文本，首页需要 select() 选中文本，然后使用 document.execCommand("Copy"); 进行复制。这些情况是不能复制的元素属性为：display:none、width:0px、height:0px
<script type="text/javascript">
function copyUrl2()
{ var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input');oInput.value = Url2;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令oInput.className = 'oInput';
oInput.style.display='none';
alert('复制成功');}
</script>
<div cols="20" id="biao1">12345678</div>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />
方法一，使用 clipboard.js 进行复制，以下是完整可用的代码，在 iphone 4 下面测试不能复制（备注：可能是我的 iphone 4 太久了），其它环境下面测试都 ok ：
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<input name="content" id="content" value="这里是需要复制的内容">
<button class="btn btn-sm btn-purple" id="copybtn" data-clipboard-action="copy" data-clipboard-target="#content">复制</button>
<script>
var clipboard = new ClipboardJS('#copybtn'); clipboard.on('success', function(e) { alert('复制成功');});
clipboard.on('error', function(e) { alert('复制失败');});
</script>
在部分安卓手机上面会提示 "复制失败"，但是还是能够复制上。
方法二，使用原始 js 进行操作，以下代码本人亲测可用，并解决了复制后会对文本进行选中 / 输入法弹出这一大问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<div class="copy-font">
<div class="uuid-code" id="content">www.mafutian.net</div>
<button class="btn-copy" id="copyBT">复制</button>
</div>
<script type="text/javascript">
function copyArticle(event) {const range = document.createRange();
range.selectNode(document.getElementById('content'));const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy'); alert("复制成功！");}
document.getElementById('copyBT').addEventListener('click', copyArticle, false);</script>
</body>
</html>
即将改元素设置成透明就行啦（备注：所有浏览器都支持 opacity 属性）。
推荐使用方法二。那么我们要我隐藏
<div class="uuid-code" id="content">www.mafutian.net</div>
这个呢，以下是 css 样式：
.uuid-code
{opacity:0;
}
即将改元素设置成透明就行啦（备注：所有浏览器都支持 opacity 属性）。
版权归 马富天个人博客 所有
本文标题：《使用 js 复制网页中的文本解决 web 页面、 ios 、 Android 系统互不兼容的两种方法》
本文链接地址：http://www.mafutian.com/377.html
转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^
顶0
踩0
| 评论审核未开启 |
|
||
|