自动复制文本是在前端开发中非常有用的工具，例如复制某个链接、电话号码或者邮箱地址等。auto_copy 是一个非常方便的 npm 包，可以实现自动复制，无需手动选中和复制。本文将介绍如何使用 auto_copy 进行自动复制。
安装 auto_copy
在使用 auto_copy 时，需要先安装该 npm 包。在终端输入以下命令进行安装：
npm i auto_copy --save
使用 auto_copy
安装完成后，我们可以在项目中使用 auto_copy。在需要进行自动复制的元素上添加 data-auto-copy 属性并且设置需要复制的文本，例如：
<button data-auto-copy="123456">点击复制</button>
上面的代码表示当用户点击按钮时，会自动将文本 123456 复制到剪贴板中。在上面的示例中，我们使用了普通的按钮元素，当然这个属性也可以用在其他元素中，比如 a 标签、span 标签等。
深入学习 auto_copy
auto_copy 在实现自动复制的过程中，使用了浏览器原生的 Clipboard API，这里简单介绍一下 Clipboard API 的使用方法。
Clipboard API
Clipboard API 可以让开发者通过代码的方式操作用户的剪贴板。在 Clipboard API 中，有三个方法和两个事件，我们将逐个介绍。
方法
navigator.clipboard.readText()
读取剪贴板中的文本。例如：
navigator.clipboard.readText().then(clipboardText => {
console.log('剪贴板中的文本：', clipboardText)
}).catch(() => {
console.log('无法读取剪贴板')
})navigator.clipboard.writeText(text)
向剪贴板中写入文本。例如：
navigator.clipboard.writeText('Hello world!').then(() => {
console.log('成功写入剪贴板')
}).catch(() => {
console.log('无法写入剪贴板')
})document.execCommand(commandString, showUI, value)
执行浏览器的命令，可以用于复制文本。例如：
document.execCommand('copy')事件
copy
当用户使用复制功能复制了内容后，会触发该事件。例如：
document.addEventListener('copy', event => {
console.log('用户使用了复制功能')
})cut
当用户使用剪切功能剪切了内容后，会触发该事件。例如：
document.addEventListener('cut', event => {
console.log('用户使用了剪切功能')
})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