概述：
最近项目中有个一键点击按钮复制文本的需求，在此之前一直使用的都是document.execCommand('Copy')这个方法。百度出来的结果清一色的也都是使用的这个方法，反正网上的文章大家抄来抄去的我也就不吐槽了。
image.png
方法一：
思路就是先调用选中文本内容的方法，把上面这段文本先选中，然后再调用document.execCommand('Copy')可以直接复制已被选中的文本。
const selection = window.getSelection(); // 该方法获取一个selection对象
selection.selectAllChildren(element) // 该方法从selection对象中取出可被选择的目标元素并选中，选中前将清除之前的选中
document.execCommand('Copy') // 该方法允许运行copy命令直接复制已被选中的可编辑内容区域的元素。
完整代码如下：
<!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">这段文本将被复制</div>
<button class="btn">点击复制</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都是实验性功能。并且document.execCommand()方法已被弃用，随时可能从ECMA标准中移除。
方法二：navigator.clipboard.writeText('message')
该方法更为简单实用，且兼容性更好，废话不多说，直接上代码：
<!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">这段文本将被复制</div>
<button class="btn">点击复制</button>
<script>
const copyEl = document.querySelector('.message')
const btnEl = document.querySelector('.btn')
btnEl.addEventListener('click', () => {
// 该方法可以写入特定字符串到操作系统的剪切板，并返回一个Promise
// 一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）
navigator.clipboard
.writeText(copyEl.textContent)
.then(() => {
console.log('复制成功')
})
.catch(() => {
console.log('复制失败')
})
})
</script>
</body>
</html>
该方法可以写入特定字符串到操作系统的剪切板，并返回一个Promise，复制成功调用resolve，复制失败调用reject，比方法一更方便快捷。选他就完事了。
转载请注明出处
网友评论