zoukankan      html  css  js  c++  java
  • 移动端复制

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

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

  • 相关阅读:
    bzoj 1176 cdq分治套树状数组
    Codeforces 669E cdq分治
    Codeforces 1101D 点分治
    Codeforces 1100E 拓扑排序
    Codeforces 1188D Make Equal DP
    Codeforces 1188A 构造
    Codeforces 1188B 式子转化
    Codeforces 1188C DP 鸽巢原理
    Codeforces 1179D 树形DP 斜率优化
    git commit -m "XX"报错 pre -commit hook failed (add --no-verify to bypass)问题
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/8431570.html
Copyright © 2011-2022 走看看