关于h5页面复制粘贴

凌云魅影

项目中遇到了复制粘贴需求,在小程序里面比较好办,直接使用api接口setClipboardData,但是在h5页面里面就稍微麻烦点。需要借助输入框的select功能,可以使用textarea或者input。

普通H5页面,下使用方法如下:

    <textarea readonly  rows="1" id="copy">12345</textarea>
    <span @click="copy">复制</span>
    var copyObj=document.getElementById("copy");
    copyObj.select();
    document.execCommand("Copy"); 
    alert('复制成功);

第二次使用uni-app做的vue项目,打包成h5,因为组件textarea会被编译成下面这样子:
image

此时id="copy"不是在原生的textarea上面,所以上面的方法行不通。还是百度找到下面的办法:

let textarea=document.createElement('textarea')
textarea.setAttribute('style','position:fixed;top:0;left:0;opacity:0;z-index:-10;');
let text=document.createTextNode('12345');
textarea.appendChild(text);
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
alert('复制成功);
阅读 1.5k
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏