在本文中，我们将了解如何在网站上实现复制到剪贴板功能。即单击Copy按钮后，段落标签的内容/文本应复制到系统剪贴板，用户可以将其粘贴到系统中的任何位置。
我们直接跳到代码部分。本文假设您对 HTML、JavaScript 和 DOM 操作有一些基本的了解。
代码
我们将编写一个非常简单的 HTML 页页来显示段落内容以及一个复制按钮。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy To Clipboard</title>
</head>
<body align="center">
<p id="content">The text to be copied.</p>
<button id="copy">Copy Text</button>
<script src="./script.js"></script>
</body>
</html>
script.js
// Reference of the paragraph tag
const content = document.getElementById("content");
// Reference of the copy button
const copyBtn = document.getElementById("copy");
// Copy button's onclick handler
copyBtn.onclick = copyToClipboard;
// Method responsible for copying the content
function copyToClipboard() {
navigator.clipboard
.writeText(content.innerText)
.then(() => alert("Copied to clipboard"))
.catch((e) => alert(e.message));
}
所以首先我们获取段落标签和copy复制按钮，然后将onclick处理程序分配给copy按钮。
单击copy按钮时，copyToClipboard方法将被调用。
复制到剪贴板
在copyToClipboard方法中，我们使用了HTML5的剪贴板 API（Clipboard API）。
Clipboard API 可用于在 Web 应用程序中实现剪切、复制和粘贴功能。
系统剪贴板通过全局navigator.clipboard属性公开。
writeText剪贴板对象的方法需要一个字符串值作为参数，它将被写入剪贴板。
它返回一个promise，一旦剪贴板的内容更新，该promise就会解决。如果出现任何一种错误，promise将被拒绝。
...
navigator.clipboard
.writeText(content.innerText)
.then(() => alert("Copied to clipboard"))
.catch((e) => alert(e.message));
...
inner text段落标签的 传递给writeText方法，如果promise得到解决，即文本已成功被复制。
同样道理，我们来可以实现cut剪切功能。原理是将文本复制到剪贴板后，只需用空字符串覆盖段落标签的innerText即可。
navigator.clipboard
.writeText(content.innerText)
.then(() => {
// Overwriting with an empty string
content.innerText = "";
alert("Copied to clipboard");
})
.catch((e) => alert(e.message));
谢谢各位阅读，如果你喜欢这篇文章或觉得它有些帮助，请点赞?
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/258477.html