JS實現(xiàn)一鍵復(fù)制

第JS實現(xiàn)一鍵復(fù)制原生js實現(xiàn)點擊按鈕復(fù)制文本，供大家參考，具體內(nèi)容如下

最近遇到一個需求，需要點擊按鈕，復(fù)制聊天記錄的文本到剪切板

一、原理分析

瀏覽器提供了copy命令，可以復(fù)制選中的內(nèi)容

document.execCommand("copy")

如果是輸入框，可以通過select()方法，選中輸入框的文本，然后調(diào)用copy命令，將文本復(fù)制到剪切板

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

最后我的解決方案是，在頁面中添加一個，然后把它隱藏掉點擊按鈕的時候，先把的value改為的innerText，然后復(fù)制中的內(nèi)容

二、代碼實現(xiàn)

styletype="text/css"

.wrapper{position:relative;}

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

/style

div

pid="text"我把你當(dāng)兄弟你卻想著復(fù)制我？/p

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

buttoncopy/button

/div

scripttype="text/javascript"

functioncopyText(){

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

varinput=document.getElementById("input");

input.value=text;//修改文本框的內(nèi)容

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

document.execCommand("copy");//執(zhí)行瀏覽器復(fù)制命令

alert("復(fù)制成功");

}

//或者

functioncopyText(value){

//創(chuàng)建元素用于復(fù)制

varaux=document.createElement("input");

//設(shè)置元素內(nèi)容

aux.setAttribute("value",value);

//將元素插入頁面進(jìn)行調(diào)用

document.body.appendChild(aux);

//復(fù)制內(nèi)容

aux.select();

//將內(nèi)容復(fù)制到剪貼板

document.execCommand("copy");

//刪除創(chuàng)建元素

document.body.removeChild(aux);

//提示

alert("復(fù)制內(nèi)容成功："+aux.value);

}

/script

三、一鍵復(fù)制

分享一個自己工作中用到的一鍵復(fù)制方法

/**

*一鍵粘貼

*@param

{String}id[需要粘貼的內(nèi)容]

*@param

{String}attr[需要copy的屬性，默認(rèn)是innerText，主要用途例如賦值a標(biāo)簽上的href鏈接]

*range+selection

*1.創(chuàng)建一個range

*2.把內(nèi)容放入range

*3.把range放入selection

*注意：參數(shù)attr不能是自定義屬性

*注意：對于user-select:none的元素?zé)o效

*注意：當(dāng)id為false且attr不會空，會直接復(fù)制attr的內(nèi)容

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('復(fù)制成功')

}catch(e){

console.log('復(fù)制失敗')

}

if(attr){

//r