如何点击按钮一键复制？

这是我参与更文挑战的第 11 天，活动详情查看：更文挑战

一键复制的思路

1. 准备好将要被复制的内容
2. 使用 Clipboard API 直接写入剪贴板，或者使用 document.execCommand() 操作被选中的内容。此时需要构建一个隐藏的输入框，将内容放到输入框中，然后执行选中操作

Clipboard API

根据 MDN 的说法：

剪贴板 Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。

剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象。 在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

只有在用户事先授予网站或应用对剪切板的访问许可之后，才能使用异步剪切板读写方法。许可操作必须通过取得权限 Permissions API 的 “clipboard-read” 和/或 “clipboard-write” 项获得。

使用方法

document.execCommand()

使用方法

function copy(e) {
    // 构建一个隐藏的 input
    let transfer = document.createElement('input');
    document.body.appendChild(transfer);
    transfer.value = target.value;  // 这里表示想要复制的内容
    
    // 先对准焦点，然后执行选中操作
    transfer.focus();
    transfer.select();
    
    // 执行复制操作
    if (document.execCommand('copy')) {
        document.execCommand('copy');
    }
    
    // 复制成功，清理现场
    transfer.blur();
    document.body.removeChild(transfer);
    
}

// 绑定到点击事件
$('#copyBtn').addEventListener('click', copy);
复制代码

最后还是建议使用第三方库：clipboard.js

clipboard.js 是一个仅有 3kb 大小的复制粘贴库。