• 移动端复制


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

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

  • 相关阅读:
    快慢指针
    成绩排序
    简单排序
    个人作业——软件工程实践总结作业
    团队作业——项目验收与总结博客(麻瓜制造者)
    Beta阶段总结博客(麻瓜制造者)
    “福大易宝”宣传文案
    Beta冲刺(5/5)(麻瓜制造者)
    Beta冲刺(4/5)(麻瓜制造者)
    个人作业——软件工程实践总结作业(待续)
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/8431570.html
Copyright © 2020-2023  润新知