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>

以上就是实现复制功能的几种常用方法，可以根据具体需求选择相应的方法在自己的项目中使用。