復(fù)制是一個(gè)使用頻率特別高的操作，在網(wǎng)頁中，一般可以選中要復(fù)制的內(nèi)容，使用快捷鍵ctrl+c 將內(nèi)容復(fù)制到剪貼板。除了使用系統(tǒng)提供的快捷方式復(fù)制網(wǎng)頁內(nèi)容，我們還可以用JS實(shí)現(xiàn)復(fù)制，這得益于document的execCommand('copy') 命令。
實(shí)現(xiàn)整個(gè)復(fù)制功能，需要以下三個(gè)步驟：
返回需要復(fù)制的內(nèi)容：這個(gè)比較簡單，返回HTML元素的
innerText屬性值就可以。選中需要復(fù)制的內(nèi)容：選中的操作可以通過表單元素的
select()方法實(shí)現(xiàn)。復(fù)制選中的內(nèi)容：使用
document.execCommand('copy')方法實(shí)現(xiàn)復(fù)制。
innerText返回內(nèi)容
大部分HTML元素都有innerText和innerHTML兩個(gè)屬性，innerText屬性返回文本內(nèi)容，innerHTML屬性返回標(biāo)簽元素。我們可以創(chuàng)建一個(gè)函數(shù)，用于獲取需要返回的內(nèi)容：
/**
* 返回當(dāng)前元素的文本內(nèi)容
* @parm {DOM} element 當(dāng)前DOM元素
*/
function selectText(element){
return element.innerText;
}
上面的selectText函數(shù)接收一個(gè)DOM元素，返回DOM元素的innerText屬性值。
表單元素select方法選中內(nèi)容
我們可以通過表單元素的select()方法選中內(nèi)容，表單元素因?yàn)閠extarea限制少于input，所以推薦使用textarea。我們可以動態(tài)創(chuàng)建一個(gè)textarea元素，將textarea的value屬性值設(shè)置為上面的innerText屬性值，再執(zhí)行textarea的select方法選中。
var textareaC = document.createElement('textarea');
textareaC.setAttribute('readonly', 'readonly'); //設(shè)置只讀屬性防止手機(jī)上彈出軟鍵盤
textareaC.value = selectText(element); //上面selectText函數(shù)返回值賦給textarea的value
document.body.appendChild(textareaC); //將textarea添加為body子元素
textareaC.select();
上面實(shí)現(xiàn)了選中，下面就可以實(shí)現(xiàn)復(fù)制功能了。
execCommand('copy')實(shí)現(xiàn)復(fù)制
最后一步就可以用execCommand('copy')實(shí)現(xiàn)復(fù)制了，它可以復(fù)制瀏覽器中選中的文本，比如說上面被textarea選中的文本，復(fù)制之后記得移除textarea。
var res = document.execCommand('copy');
document.body.removeChild(textareaC);//移除DOM元素
console.log("復(fù)制成功");
console.log(res);//res為復(fù)制結(jié)果，是一個(gè)布爾值
第二步和第三步可以優(yōu)化一下，創(chuàng)建一個(gè)copy函數(shù)，函數(shù)參數(shù)設(shè)置為第一步需要復(fù)制的文本，返回值為復(fù)制的結(jié)果。
完整JS示例如下：
/**
* 返回當(dāng)前元素的文本內(nèi)容
* @parm {DOM} element 當(dāng)前DOM元素
*/
function selectText(element){
return element.innerText;
}
/**
* @param {String} text 需要復(fù)制的內(nèi)容
* @return {Boolean} 復(fù)制成功:true或者復(fù)制失敗:false 執(zhí)行完函數(shù)后，按ctrl + v試試
*/
function copyText(text){
var textareaC = document.createElement('textarea');
textareaC.setAttribute('readonly', 'readonly'); //設(shè)置只讀屬性防止手機(jī)上彈出軟鍵盤
textareaC.value = text;
document.body.appendChild(textareaC); //將textarea添加為body子元素
textareaC.select();
var res = document.execCommand('copy');
document.body.removeChild(textareaC);//移除DOM元素
console.log("復(fù)制成功");
return res;
}
如何使用
可以將上面的完整JS示例寫入一個(gè)JS文件，將JS文件引入HTML中，通過JS點(diǎn)擊事件來執(zhí)行復(fù)制函數(shù)。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS復(fù)制內(nèi)容-demo</title>
<style>
h3{
text-align: center;
}
</style>
</head>
<body>
<h3 onclick="myFun(this)">點(diǎn)我選擇復(fù)制我的內(nèi)容1111</h3>
<h3 onclick="myFun(this)">點(diǎn)我選擇復(fù)制我的內(nèi)容2222</h3>
<script src="copy.js"></script><!--引入JS文件-->
<script>
function myFun(e) {
copyText(selectText(e));
}
</script>
</body>
</html>
效果圖：
