自动复制文本是在前端开发中非常有用的工具，例如复制某个链接、电话号码或者邮箱地址等。auto_copy 是一个非常方便的 npm 包，可以实现自动复制，无需手动选中和复制。本文将介绍如何使用 auto_copy 进行自动复制。
安装 auto_copy
在使用 auto_copy 时，需要先安装该 npm 包。在终端输入以下命令进行安装：
--- - --------- ------
使用 auto_copy
安装完成后，我们可以在项目中使用 auto_copy。在需要进行自动复制的元素上添加 data-auto-copy 属性并且设置需要复制的文本，例如：
------- -------------------------------------
上面的代码表示当用户点击按钮时，会自动将文本 123456 复制到剪贴板中。在上面的示例中，我们使用了普通的按钮元素，当然这个属性也可以用在其他元素中，比如 a 标签、span 标签等。
深入学习 auto_copy
auto_copy 在实现自动复制的过程中，使用了浏览器原生的 Clipboard API，这里简单介绍一下 Clipboard API 的使用方法。
Clipboard API
Clipboard API 可以让开发者通过代码的方式操作用户的剪贴板。在 Clipboard API 中，有三个方法和两个事件，我们将逐个介绍。
方法
navigator.clipboard.readText()
读取剪贴板中的文本。例如：
------------------------------------------------- -- - ----------------------- -------------- ----------- -- - ---------------------- --
navigator.clipboard.writeText(text)
向剪贴板中写入文本。例如：
------------------------------------ ---------------- -- - ---------------------- ----------- -- - ---------------------- --
document.execCommand(commandString, showUI, value)
执行浏览器的命令，可以用于复制文本。例如：
----------------------------
事件
copy
当用户使用复制功能复制了内容后，会触发该事件。例如：
--------------------------------- ----- -- - ------------------------ --
cut
当用户使用剪切功能剪切了内容后，会触发该事件。例如：
-------------------------------- ----- -- - ------------------------ --
auto_copy 实现原理
auto_copy 的实现原理非常简单，只是在点击元素时，通过 Clipboard API 将 data-auto-copy 属性中的文本写入到剪贴板中。
通过查看源码，我们可以发现 auto_copy 的实现过程如下：
------ ----------- ---- -----------
----- ---- - ------- -- -
----- --------- - --- -------------------- -
----- -- -- --------------------------------------
--
----------------------- ----- -- -
----------------------
-------------------
--
--------------------- ----- -- -
-----------------------
-------------------
--
------------------------
-
------ ------- ----auto_copy 需要依赖另一个 npm 包 clipboard，通过该包来实现剪贴板的复制操作。
示例代码
下面是一个实际应用中的例子，我们在一个表格列中添加了自动复制功能，当用户点击该列中的任何一个单元格时，会自动将该单元格中的文本复制到剪贴板中。
-------
-------
----
-----------
-------------
-----
--------
-------
----
-----------
--- ---------------------------------------------
-----
----
-----------
--- ---------------------------------------------
-----
--------
--------
------- ------------------------------------------------------
--------
----- ------ - -----------------------------------------------
--- ---- - - -- - - -------------- ---- -
--------------------
-
---------在上面的代码中，我们使用了 querySelectorAll 获取所有带有 data-auto-copy 属性的单元格，然后循环为每个单元格添加自动复制功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600567f181e8991b448e4191