点击复制！

大家好👋

有没有想过为什么有些网站有“点击复制”功能？

您也可以这样做，无论您是否正在构建一个电子商务网站，希望用户单击共享按钮以在其网站上写入产品的网址。
或者您正在构建一些网站/文档，人们可以点击某个地方并复制代码片段。

在本文中，我将解释如何使用用户的剪贴板😄。

让我们开始吧🚀

为了更好地解释这一点，我将创建一个演示项目。如果你愿意，可以跟着做。

创建一个文件夹并随意命名。
在该文件夹中创建两个文件
- 1.index.html
- 2.app.js

在中添加以下 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>
    <style></style>
  </head>
  <body>
    <h2>Implementing copy to clipboard with a simple click 📋</h2>
    <button>Click to copy</button>
    <script src="./app.js"></script>
  </body>
</html>

现在选择h2元素：buttonapp.js

const h2 = document.querySelector('h2');
const button = document.querySelector('button');

index.html在浏览器中预览。

附注：此演示无法在 IE 中运行

它看起来应该是这样的👇

现在要更改用户的剪贴板，我们必须使用Clipboard API。

该clipboard对象由属性公开navigator.clipboard。

在文件中添加以下代码app.js：

const cb = navigator.clipboard;

console.log(cb)看起来像这样👇

👉 请记住：Clipboard API 是异步的，这意味着每个方法都会返回一个 Promise，该 Promise 将被解析或拒绝。
要使用，promise我们可以使用async/await语法或.then/.catch。

从剪贴板读取文本📋

要从剪贴板读取文本，我将添加一个click事件监听器button：
在事件监听器中，我将调用一个名为的方法readText()，该方法在我们之前访问的对象上可用cb：

button.addEventListener('click', async () => {
  const text = await cb.readText();
  console.log(text);
    // output will be whatever you last copied, 
    // or empty string if the
    // copied data is not of type text.
});

要从剪贴板读取文本，用户必须授予read权限，否则操作将失败。👇
如果权限被拒绝👇

您可以使用权限 API检查用户是否授予了权限。

要了解有关权限 API 的更多信息，请阅读我的文章。

将文本写入剪贴板📋

为了将文本写入用户的剪贴板，我们使用对象writeText()上可用的方法cb。
浏览器自动授予写入权限。

在中写入以下代码app.js：

button.addEventListener('click', async () => {
  // const text = await cb.readText();
  // console.log(text);

  // writing the inner text of the h2 element
  // to the user's clipboard.  
    cb.writeText(h2.innerText).then(() => {
        console.log('text written to clipboard')
    })
});

朋友们，这篇文章就到这里了。

看看吧，你是多么容易弄乱用户的剪贴板😂。

感谢❤️阅读它，我希望你觉得它有用。

想要获取简洁的技巧和窍门，请在Twitter上关注我

编码快乐💚

文章来源：https://dev.to/sidmirza4/click-to-copy-81k