当你在编写前端应用时，剪贴板是一个非常有用的功能。它可以让用户从网页复制内容，并粘贴到其他应用程序中，或者从其他应用程序中复制内容并粘贴到网页中。本文将介绍如何在 Gmail 和谷歌浏览器 12+ 中使用剪贴板功能。
HTML5 剪贴板 API
HTML5 引入了一个新的 API，即Clipboard API，它使得在网页上读取和写入剪贴板变得更加容易。这个 API 包含三个方法：
readText()：从剪贴板读取纯文本。writeText(text)：将指定的文本写入剪贴板。read()：从剪贴板读取数据，并将其转换为 DataTransfer 对象。
下面是一个简单的示例，演示如何使用 Clipboard API 读取和写入剪贴板中的文本：
-- -------------------- ---- -------
------- ------------------------------
--------
----- ---------- - ---------------------------------------
------------------------------------ ----- -- -- -
--- -
----- ---- - ------- --------
----- ------------------------------------
------------------- -- ------------ ------
- ----- ----- -
--------------------- -- ----- ---- -- ------------ -----
-
---
---------在这个示例中，我们使用 navigator.clipboard.writeText() 方法将文本写入剪贴板。注意，这个方法是异步的，所以我们使用 async 和 await 关键字来等待它完成。
在 Gmail 中使用剪贴板功能
在 Gmail 中，你可以使用剪贴板功能复制和粘贴文本、图片和附件。要复制一段文字，只需选中它并按下 Ctrl+C（Windows）或 Command+C（Mac），然后将光标移动到你想要粘贴的位置，并按下 Ctrl+V（Windows）或 Command+V（Mac）。
如果你想要在你的前端应用中使用剪贴板功能与 Gmail 进行交互，你可以通过以下方式来实现：
-- -------------------- ---- -------
------- -------------------- -- --------------
--------
----- --------------- - --------------------------------------
----------------------------------------- ----- -- -- -
--- -
----- ---- - ------- --------
----- ------------------------------------
-- ---- - --- ----- -- ----- --- ----- --- ---- ---- --- -----
----------------------------------------------------------------------- - ------------------------- ----------
------------------- -- -------- ------
- ----- ----- -
--------------------- -- ---- ---- -- -------- -----
-
---
---------在这个示例中，我们使用 navigator.clipboard.writeText() 方法将文本写入剪贴板，并通过打开 Gmail 的新邮件来粘贴这段文本。注意，我们使用了 encodeURIComponent() 方法对文本进行编码，以确保它是 URL 安全的。
在谷歌浏览器中使用剪贴板功能
谷歌浏览器 12+ 版本支持 Clipboard API。你可以使用该 API 来读取和写入剪贴板中的文本、图片和文件。下面是一个示例，演示如何使用 Clipboard API 将网页上的文本复制到剪贴板中：
-- -------------------- ---- -------
------- ------------------- -------------
--------
----- -------------- - -------------------------------------
---------------------------------------- ----- -- -- -
--- -
----- ---- - ------- ---------
----- ------------------------------------
-------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------