• 移动端复制


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

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

  • 相关阅读:
    Linux mysql忘记密码 修改密码 解决方法
    nginx http转https后js,css样式丢失/没显示
    Spring cron 表达式
    Python 学习笔记 -- 装饰器
    Python 学习笔记 -- 一些常用的BIF
    Python 学习笔记 -- 类的一些小知识
    Python 学习笔记 -- 继承与多态(入门级实例)
    Python 基础实战 -- 小游戏之乌龟吃鱼(其实只能看不能玩.....)
    Python 学习笔记 -- 类的访问限制
    Python 学习笔记 -- 类和实例
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/8431570.html
Copyright © 2020-2023  润新知