将文本复制到剪贴板可以更轻松地使用网页，因此用户肯定会喜欢此功能。
我们可以使用 JavaScript 来实现它，我们随时为我们提供帮助。
浏览器扩展可以与系统剪贴板交互的方法有两种：Document.execCommand() 方法和异步剪贴板 API。
execCommand（）
document.execCommand() 可用于触发“剪切”和“复制”操作，用当前选定的数据替换剪贴板的当前内容。
看看下面的一段代码：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<p>
<button id="copyTextBtn">Copy Textarea</button>
<textarea id="copytextarea">Selcet and copy text</textarea>
</p>
<script>
copyTextBtn = document.querySelector('#copyTextBtn');
copyTextBtn.addEventListener('click', function(event) {
let copyTextarea = document.querySelector('#copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
let successful = document.execCommand('copy');
let msg = successful ? '成功' : '失败';
alert('复制 ' + msg);
} catch(err) {
alert('无法复制');
}
});
</script>
</body>
</html>
其中我们创建一个完全透明的 textarea 并将其添加到文档正文。
完成后，我们将其内容设置为要复制的文本。
调用 document.execCommand(copy) 选择 textarea 内容。
最后一步是从文档中删除 textarea。
剪贴板 API
Clipboard API 提供了灵活性并且不限制将当前选择复制到剪贴板。
我们可以直接指定要添加到剪贴板的信息。
我们应该调用 writeText() 函数将文本复制到剪贴板：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<textarea id="textId">Some copying text</textarea>
<button id="copyBtn">Copy Button</button>
<script>
document.getElementById("copyBtn")
.onclick = function() {
let text = document.getElementById("textId").value;
navigator.clipboard.writeText(text)
.then(() => {
alert('文本已复制到剪切板');
})
.catch(err => {
alert('无法复制: ', err);
});
}
</script>
</body>
</html>
我们也可以编写一个异步函数并等待 writeText() 函数的返回：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<textarea id="textId">Some copying text</textarea>
<button id="copyBtn">Copy Button</button>
<script>
document.getElementById("copyBtn").onclick = function() {
let text = document.getElementById("textId").value;
copyTextToClipboard(text);
}
async function copyTextToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
alert('文本已复制到剪切板');
} catch(err) {
alert('无法复制: ', err);
}
}
</script>
</body>
</html>
剪贴板 API 提供了响应剪贴板命令（剪切、复制和粘贴）以及异步读取或者写入系统剪贴板的能力。
日期：2020-06-02 22:16:14 来源：oir作者：oir