有时候为了提升用户体验，比如在某些页面需要实现点击内容，将内容复制到剪切板，可以提升用户复制内容的操作效率；因此在实际操作中通过一定的事件触发复制功能是非常有意义的行为，下面是两种通过原生js实现复制内容到剪切板。
方法一：
function copyHandle(content){
let copy = (e)=>{
e.preventDefault()
e.clipboardData.setData('text/plain',content)
alert('复制成功')
document.removeEventListener('copy',copy)
}
document.addEventListener('copy',copy)
document.execCommand("Copy");
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
过程：
- document.execCommand(“Copy”) 触发复制监听事件
- e.clipboardData.setData 将内容添加到剪切板
- 复制完成后，取消监听事件，否则会触发多次
**应用场景：**已知复制的内容，传入内容直接调用函数
方法二：
function copyLink(dom) {
let range = document.createRange();
let selection = window.getSelection();
range.selectNode(dom);
selection.removeAllRanges();
selection.addRange(range);
let bool = document.execCommand("copy", "false", null);
if (bool) {
alert("复制成功");
}
document.execCommand("unselect", "false", null);
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
过程：
- range.selectNode 创建选取内容范围
- removeAllRanges 清除已选择的内容
- addRanges 添加选取内容，模拟用户选取
- document.execCommand(“Copy”) 触发复制事件
- document.execCommand(“unselect”, “false”, null) 取消选取区域
**应用场景：**复制指定节点的内容
