近期做项目遇到了移动端复制的需求,结果在ios手机上复制的时候遇到了问题,网上找到了一个方法,写了demo测试是可以的,但是放在项目中ios手机还是不能复制成功,看到许多人说clipboard.js插件可以,但是项目时间比较紧,怕会遇到其他的坑,还是和原生沟通了一下,调用原生的复制方法。
写这篇文章仅记录下测试demo中的方法,毕竟测试是可以的,至于项目中为什么没有成功还没详细研究,如有哪位大佬知道问题所在,烦请告知,不胜感激。
dom结构代码如下:
<div id="btn">复制</div> <input id="content1" type="text" value=""/> <div id="content2"></div>
js代码如下:
var btn = document.getElementById("btn"); var content1 = document.getElementById('content1'); var content12 = document.getElementById('content2'); content1.value = "android要复制的内容"; content2.innerHTML = "ios要复制的内容"; var copy = function(){ if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备 window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效 var Url2=document.getElementById("content2");//要复制文字的节点 var range = document.createRange(); // 选中需要复制的节点 range.selectNode(Url2); // 执行选中元素 window.getSelection().addRange(range); // 执行 copy 操作 var successful = document.execCommand('copy'); // 移除选中的元素 window.getSelection().removeAllRanges(); }else{ var Url2=document.getElementById("content1");//要复制文字的节点 Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 } }; btn.onclick = function(){ copy() };
如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读!