js复制到剪贴板 复制功能实现大全
复制（Copy）功能指的是将一个文本或者图片等资源从一个位置通过“复制”的方式再次拷贝到另一个位置，被复制的资源不会在原位置上被删除或移动，只是将其拷贝到了新的位置，从而实现了重复利用资源的目的。
在Web前端开发中，复制功能也是很常见的一个需求，如点击时自动复制某段文本、在表单中粘贴内容等功能。本文将介绍几种实现复制功能的方法。
方法1：使用execCommand方法
该方法是早期浏览器使用的较为普遍的复制功能方法，它是对浏览器的一个指令，要求浏览器执行“复制”操作。该方法的代码如下：
function copyText(text) {
const input = document.createElement('input')
input.setAttribute('value', text)
document.body.appendChild(input)
input.select()
document.execCommand('Copy')
document.body.removeChild(input)
}
具体实现步骤：
- 创建一个input元素，并将需要复制的文本设置为它的value属性；
- 将该元素添加到文档的body中；
- 选中input元素中的文本；
- 使用
document.execCommand('Copy')将选中的文本复制到粘贴板中； - 将该input元素从文档的body中删除。
在实际使用中，只需要将需要复制的文本作为参数传递给copyText函数即可。
copyText('需要复制的文本')
方法2：使用Clipboard API
Clipboard API是HTML5新增的API，提供了操作浏览器剪贴板的方法。使用Clipboard API实现复制功能，代码如下：
function copyText(text) {
navigator.clipboard.writeText(text).then(function() {
console.log('复制成功')
}, function() {
console.log('复制失败')
})
}
具体实现步骤：
- 调用navigator.clipboard.writeText方法，将需要复制的文本作为参数传递给该方法；
- 使用Promise.then()方法，监控复制结果并进行相应处理。
在使用Clipboard API之前，需要先判断浏览器是否支持该API：
if (!navigator.clipboard) {
console.log('该浏览器不支持Clipboard API')
return
}
copyText('需要复制的文本')
方法3：使用document.execCommand(‘copy’)方法
使用document.execCommand('copy')方法实现复制功能，代码如下：
function copyText(text) {
const tempInput = document.createElement('input')
tempInput.value = text
document.body.appendChild(tempInput)
tempInput.select()
document.execCommand('copy')
document.body.removeChild(tempInput)
}
具体实现步骤与方法1类似。
这种方法的优点是可以实现跨浏览器的复制功能，但是在现代浏览器中已不再推荐使用，因为它涉及到了一些安全性问题。
示例说明
下面是两个示例，分别演示了如何在按钮点击时复制某段文本。第一个示例使用了方法1，第二个示例使用了方法2。
示例1：使用execCommand方法
<button onclick="copyText('需要复制的文本')">点击复制</button>
示例2：使用Clipboard API
<button onclick="copyText('需要复制的文本')">点击复制</button>
<script>
function copyText(text) {
if (!navigator.clipboard) {
console.log('该浏览器不支持Clipboard API')
return
}
navigator.clipboard.writeText(text).then(function() {
console.log('复制成功')
}, function() {
console.log('复制失败')
})
}
</script>
以上就是实现复制功能的几种常用方法，可以根据具体需求选择相应的方法在自己的项目中使用。
