JS实现复制到剪贴板功能

在前端开发中，复制到剪贴板是一个非常常见的功能，通常使用JavaScript来实现。本文将介绍如何使用JS实现复制到剪贴板功能。

浏览器兼容性

由于不同浏览器的实现方式不同，因此在实现复制到剪贴板功能时需要注意兼容性。以下是不同浏览器的实现方式：

• Chrome和Firefox：使用document.execCommand('copy')函数实现复制功能；
• Safari：使用Clipboard API实现复制功能；
• IE11+：使用msSaveBlob和msSaveOrOpenBlob函数实现复制功能。

下面将分别介绍以上三种实现方式。

使用document.execCommand('copy')实现复制

使用document.execCommand('copy')实现复制非常简单，只需在点击复制按钮时调用该函数即可。代码如下：

function copyToClipboard(text) {
  const input = document.createElement('input');
  input.setAttribute('value', text);
  document.body.appendChild(input);
  input.select();
  const result = document.execCommand('copy');
  document.body.removeChild(input);
  return result;
}

以上代码会先在页面中创建一个input元素，将要复制的文本作为其value属性值，并将该input元素加入body中。然后选中input元素中的文本内容，调用document.execCommand('copy')函数实现复制，最后将该input元素从页面中移除。

使用Clipboard API实现复制

在Safari中，需要使用Clipboard API来实现复制功能。使用Clipboard API实现复制的代码如下：

function copyToClipboard(text) {
  const clipboard = navigator.clipboard;
  return clipboard.writeText(text);
}

以上代码会调用navigator.clipboard.writeText()函数，将要复制的文本内容写入到系统剪贴板中。

使用msSaveBlob和msSaveOrOpenBlob实现复制

在IE11+中，由于不支持document.execCommand('copy')函数，因此需要使用微软提供的msSaveBlob和msSaveOrOpenBlob函数来实现复制功能。使用msSaveBlob和msSaveOrOpenBlob实现复制的代码如下：

function copyToClipboard(text) {
  if (navigator.msSaveBlob) {
    const blob = new Blob([text], { type: 'text/plain' });
    navigator.msSaveBlob(blob, 'clipboard.txt');
  } else if (navigator.msSaveOrOpenBlob) {
    const blob = new Blob([text], { type: 'text/plain' });
    navigator.msSaveOrOpenBlob(blob, 'clipboard.txt');
  }
}

以上代码会先判断浏览器是否支持msSaveBlob函数，如果支持则创建一个Blob对象并调用msSaveBlob函数，将文本内容写入到系统剪贴板中。如果不支持msSaveBlob函数，则将调用msSaveOrOpenBlob函数来实现复制功能。

总结

本文介绍了三种在不同浏览器中实现复制到剪贴板功能的方式。由于不同浏览器的实现方式不同，因此在实现该功能时需要注意浏览器兼容性。希望本文能够对大家实现这个功能提供帮助。