原生js实现复制功能

前端J先生

已于 2024-03-10 11:06:31 修改

阅读量553

点赞数 8

文章标签： javascript 前端开发语言

于 2024-03-10 10:30:51 首次发布

本文链接：https://blog.csdn.net/qq_37547964/article/details/136596926

版权

本文介绍了如何在JavaScript中使用`document.execCommand`和`navigator.clipboard.writeText`实现复制功能，讨论了不同方法的适用场景，以及在处理兼容性和安全策略方面的注意事项。

摘要由CSDN通过智能技术生成

在JavaScript中，实现复制功能主要依赖于document.execCommand('copy')方法，这个方法可以复制文本到用户的剪贴板。但是请注意，这个方法可能在某些环境下（如某些浏览器或浏览器设置中）不可用。

以下是一个简单的示例，该示例创建了一个按钮，当点击该按钮时，它会将一段文本复制到剪贴板：

<!DOCTYPE html>
<html>
<body>

<p id="myP">Hello World!</p>

<button onclick="myFunction()">复制文本</button>

<script>
function myFunction() {
  /* 获取要复制的文本 */
  var copyText = document.getElementById("myP");

  /* 创建一个新的textarea元素，设置其值为要复制的文本 */
  var textArea = document.createElement("textarea");
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  textArea.style.padding = 0;
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  textArea.style.background = 'transparent';
  textArea.value = copyText.textContent;

  /* 将新的textarea元素添加到文档中 */
  document.body.appendChild(textArea);

  /* 选中textarea中的文本 */
  textArea.select();

  /* 复制选中的文本到剪贴板 */
  document.execCommand('copy');

  /* 移除新添加的textarea元素 */
  document.body.removeChild(textArea);
}
</script>

</body>
</html>

在这个示例中，我们首先通过document.getElementById获取了要复制的文本。然后，我们创建了一个新的textarea元素，并设置其值为要复制的文本。接着，我们将这个textarea元素添加到文档中，并选中其中的文本。最后，我们使用document.execCommand('copy')将选中的文本复制到剪贴板，然后移除新添加的textarea元素。

最新api实现复制功能

在JavaScript中，复制文本到剪贴板的功能可以通过使用document.execCommand('copy')或navigator.clipboard.writeText()来实现。document.execCommand('copy')在一些老的浏览器版本中可能仍然可用，但是已经被废弃，因此推荐使用navigator.clipboard.writeText()。

以下是一个使用navigator.clipboard.writeText()的示例：

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        console.log('Copying to clipboard was successful!');
    }).catch(function(err) {
        // 这个错误可能会在不允许自动复制的环境中发生，例如一些浏览器可能会要求用户交互
        console.error('Async: Could not copy text: ', err);
    });
}

// 使用函数
copyToClipboard('这是要复制的文本');

这个函数接受一个字符串参数text，然后尝试将其复制到剪贴板。如果成功，它会在控制台中打印一条消息。如果失败（例如，由于浏览器策略或用户权限问题），它会捕获错误并在控制台中打印错误消息。

最终版本

export function  copyToClipboard(text) {
  // 创建元素
const copyFrom = document.createElement('textarea');
try{
// 设置元素的内容
copyFrom.value = text;
// 将创建的元素添加到body中
document.body.appendChild(copyFrom);
// 选中元素
copyFrom.select();
// 执行复制命令，将文本添加到用户的剪贴板
document.execCommand('copy');
// 删除创建的元素
document.body.removeChild(copyFrom);
this.$message.success('复制成功!')
}catch{
this.$message.warning('复制失败,请手动复制')
// 删除创建的元素
document.body.removeChild(copyFrom);
}

}