概述：
最近項(xiàng)目中有個(gè)一鍵點(diǎn)擊按鈕復(fù)制文本的需求哗蜈，在此之前一直使用的都是document.execCommand('Copy')這個(gè)方法线定。百度出來的結(jié)果清一色的也都是使用的這個(gè)方法娜谊，反正網(wǎng)上的文章大家抄來抄去的我也就不吐槽了。
image.png
方法一：
思路就是先調(diào)用選中文本內(nèi)容的方法斤讥，把上面這段文本先選中纱皆，然后再調(diào)用document.execCommand('Copy')可以直接復(fù)制已被選中的文本。
const selection = window.getSelection(); // 該方法獲取一個(gè)selection對(duì)象
selection.selectAllChildren(element) // 該方法從selection對(duì)象中取出可被選擇的目標(biāo)元素并選中芭商，選中前將清除之前的選中
document.execCommand('Copy') // 該方法允許運(yùn)行copy命令直接復(fù)制已被選中的可編輯內(nèi)容區(qū)域的元素派草。
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div class="message">這段文本將被復(fù)制</div>
<button class="btn">點(diǎn)擊復(fù)制</button>
<script>
const copyEl = document.querySelector('.message')
const btnEl = document.querySelector('.btn')
btnEl.addEventListener('click', () => {
window.getSelection().selectAllChildren(copyEl)
document.execCommand('Copy')
})
</script>
</body>
</html>
該方法存在兼容性問題，在mdn中也提到getSelection和selectAllChildren都是實(shí)驗(yàn)性功能铛楣。并且document.execCommand()方法已被棄用近迁，隨時(shí)可能從ECMA標(biāo)準(zhǔn)中移除。
方法二：navigator.clipboard.writeText('message')
該方法更為簡(jiǎn)單實(shí)用簸州，且兼容性更好鉴竭，廢話不多說，直接上代碼：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div class="message">這段文本將被復(fù)制</div>
<button class="btn">點(diǎn)擊復(fù)制</button>
<script>
const copyEl = document.querySelector('.message')
const btnEl = document.querySelector('.btn')
btnEl.addEventListener('click', () => {
// 該方法可以寫入特定字符串到操作系統(tǒng)的剪切板岸浑，并返回一個(gè)Promise
// 一旦剪貼板的內(nèi)容被更新搏存，它就會(huì)被解析。如果調(diào)用者沒有寫入剪貼板的權(quán)限矢洲，則拒絕寫入剪切板（reject）
navigator.clipboard
.writeText(copyEl.textContent)
.then(() => {
console.log('復(fù)制成功')
})
.catch(() => {
console.log('復(fù)制失敗')
})
})
</script>
</body>
</html>
該方法可以寫入特定字符串到操作系統(tǒng)的剪切板璧眠，并返回一個(gè)Promise，復(fù)制成功調(diào)用resolve读虏，復(fù)制失敗調(diào)用reject责静，比方法一更方便快捷。選他就完事了盖桥。
轉(zhuǎn)載請(qǐng)注明出處
