JS实现一键复制

第JS实现一键复制原生js实现点击按钮复制文本，供大家参考，具体内容如下

最近遇到一个需求，需要点击按钮，复制聊天记录的文本到剪切板

一、原理分析

浏览器提供了copy命令，可以复制选中的内容

document.execCommand("copy")

如果是输入框，可以通过select()方法，选中输入框的文本，然后调用copy命令，将文本复制到剪切板

但是select()方法只对和有效，对于就不好使

最后我的解决方案是，在页面中添加一个，然后把它隐藏掉点击按钮的时候，先把的value改为的innerText，然后复制中的内容

二、代码实现

styletype="text/css"

.wrapper{position:relative;}

#input{position:absolute;top:0;left:0;opacity:0;z-index:-10;}

/style

div

pid="text"我把你当兄弟你却想着复制我？/p

textareaid="input"这是幕后黑手/textarea

buttoncopy/button

/div

scripttype="text/javascript"

functioncopyText(){

vartext=document.getElementById("text").innerText;

varinput=document.getElementById("input");

input.value=text;//修改文本框的内容

input.select();//选中文本

document.execCommand("copy");//执行浏览器复制命令

alert("复制成功");

}

//或者

functioncopyText(value){

//创建元素用于复制

varaux=document.createElement("input");

//设置元素内容

aux.setAttribute("value",value);

//将元素插入页面进行调用

document.body.appendChild(aux);

//复制内容

aux.select();

//将内容复制到剪贴板

document.execCommand("copy");

//删除创建元素

document.body.removeChild(aux);

//提示

alert("复制内容成功："+aux.value);

}

/script

三、一键复制

分享一个自己工作中用到的一键复制方法

/**

*一键粘贴

*@param

{String}id[需要粘贴的内容]

*@param

{String}attr[需要copy的属性，默认是innerText，主要用途例如赋值a标签上的href链接]

*range+selection

*1.创建一个range

*2.把内容放入range

*3.把range放入selection

*注意：参数attr不能是自定义属性

*注意：对于user-select:none的元素无效

*注意：当id为false且attr不会空，会直接复制attr的内容

copy(id,attr){

lettarget=null;

if(attr){

target=document.createElement('div');

target.id='tempTarget';

target.style.opacity='0';

if(id){

letcurNode=document.querySelector('#'+id);

target.innerText=curNode[attr];

}else{

target.innerText=attr;

}

document.body.appendChild(target);

}else{

target=document.querySelector('#'+id);

}

try{

letrange=document.createRange();

range.selectNode(target);

window.getSelection().removeAllRanges();

window.getSelection().addRange(range);

document.execCommand('copy');

window.getSelection().removeAllRanges();

console.log('复制成功')

}catch(e){

console.log('复制失败')

}

if(attr){

//r