原生js复制ios+android

1,846 阅读1分钟

移动端项目中有一个需求是要复制,但是只有这一个地方用,所以不想引插件,太占地方。所以找了一个方法。记录一下. 项目是基于vue搭建的。

<button @click="copyUrl">复制</button>
<input readOnly="true" style="outline: none;border: 0px; color: rgba(0,0,0,0.0);position: absolute;left:-200px; background-color: transparent" id="biao1" value=""/>
<div id="biaoios" style=";position: absolute;left:-200px; color: rgba(0,0,0,0);background-color: transparent" ></div>
copyUrl(){
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {     //区分iPhone设备
            window.getSelection().removeAllRanges();     //这段代码必须放在前面否则无效
            var Url2=document.getElementById("biaoios");       //要复制文字的节点
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(Url2);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');

            // 移除选中的元素
            window.getSelection().removeAllRanges();
            this.$toast.show('复制成功');
            // console.log("ios");
        }else{
            var Url2=document.getElementById("biao1");//要复制文字的节点
            Url2.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            // console.log("an");
            this.$toast.show('复制成功');
        }
    },