13426109659
info@21cto.com

使用JS实现复制剪贴板功能

作者 Admin 分类 资讯 06月14日

在本文中,我们将了解如何在网站上实现复制到剪贴板功能。即单击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));


谢谢各位阅读,如果你喜欢这篇文章或觉得它有些帮助,请点赞👍


 

评论