移动端复制

近期做项目遇到了移动端复制的需求,结果在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()
};

 如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读!

原文地址:https://www.cnblogs.com/wangzhenyu666/p/8431570.html