JS复制到剪切板|极客笔记

JS复制到剪切板

在网页开发中，复制文本到剪切板是一个常见的需求。通过JavaScript，可以方便地实现这一功能。本文将详细介绍如何使用JavaScript来复制文本到剪切板，并给出实际的代码示例。

方法一：document.execCommand()

document.execCommand()是一种比较传统的复制文本到剪切板的方法。它是一个JavaScript原生方法，可以用于执行对文档的命令。

function copyToClipboard(text) {
  var tempInput = document.createElement("input");
  tempInput.value = text;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
}

var textToCopy = "Hello, world!";
copyToClipboard(textToCopy);

alert("Text copied to clipboard: " + textToCopy);

以上代码中，copyToClipboard函数接受一个参数text，将这个文本值复制到页面上的一个临时input元素中，并通过document.execCommand("copy")方法将其复制到剪切板中。

这种方法对大多数情况下是可行的，但是在一些浏览器中可能会存在兼容性问题，因此我们还可以使用方法二来实现。

方法二：Async Clipboard API

最新的浏览器已经支持Async Clipboard API，这是一种更加现代化和强大的方法来进行剪切板处理。它提供了复制和粘贴的异步操作，可以更好地处理用户权限和安全性。

我们可以使用navigator.clipboard.writeText()方法来将文本复制到剪切板。

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    alert("Text copied to clipboard: " + text);
  } catch (err) {
    alert("Failed to copy text to clipboard: " + err);
  }
}

var textToCopy = "Hello, world!";
copyToClipboard(textToCopy);

在这段代码中，copyToClipboard函数使用了async/await语法来异步执行复制操作，通过navigator.clipboard.writeText()方法来将文本写入剪切板。如果复制成功，弹出提示框显示成功信息，否则显示失败信息。

演示

下面我们来演示一下上面两种方法的效果。点击下面的按钮，可以将文本”Hello, world!”复制到剪切板中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy to Clipboard</title>
</head>
<body>
<button onclick="copyToClipboard('Hello, world!')">Copy Text</button>

<script>
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    alert("Text copied to clipboard: " + text);
  } catch (err) {
    alert("Failed to copy text to clipboard: " + err);
  }
}
</script>
</body>
</html>

点击按钮后，如果浏览器支持Async Clipboard API，则会成功复制文本到剪切板，并弹出提示框显示成功信息；否则会尝试使用execCommand()方法来复制文本，可能会出现兼容性问题。