Web开发：一键复制到剪切板功能实现思路

        在很多网页页面中我们都使用到过一键复制内容到剪切板的小功能，那么，具体如何实现呢？下面来讲述基于原生JavaScript API的两种实现思路。

同步方式：document.execCommand

   这种方式：

①优点：是最传统的方法，而且兼容性很好， 各大浏览器都支持，使用起来也简洁方便。

②缺点：只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容；另外，这种操作是同步的，粘贴大量数据，页面会出现卡顿，导致页面无法及时响应等情况。

      基本语法为：

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

          其中：

返回值：一个 Boolean ，如果是 false 则表示操作不被支持或未被启用

参数：

       aCommandName：要执行的命令名称，这里是复制，就对应copy；

       aShowDefaultUI：是否展示用户界面，一般为 false；

       aValueArgument：一些命令（例如 insertImage）需要额外的参数（insertImage 需要提供插入 image 的 url），默认为 null。

        示例代码，

        const getJSONData = () => {
            const content = document.querySelectorAll(".content>p")
            const result = Object.create(null);
            content.forEach(item => {
                result[item.querySelector("#label").innerHTML] = item.querySelector("#value").innerHTML
            })
            return result
        }


        const btnTrad = document.querySelector("#trad-copy");
        btnTrad.addEventListener("click", () => {
            //获取被复制的内容
            const copyData = getJSONData()
            //创建input辅助元素
            const input = document.createElement('input');
            document.body.append(input)
            input.value = JSON.stringify(copyData);
            //选中input元素
            input.select();
            //复制
            const flag = document.execCommand('copy',false,null)
            console.log('copy:', flag)
            //移除辅助元素
            input.remove()
        })

Tips：在 HTML元素中，select事件只能在表单<input type="text">和 <textarea>元素上触发。

异步方式：navigator.clipboard

        navigator.clipboard可以获取一个Clipboard剪切板对象，通过该对象，可以实现剪切、复制、粘贴的操作。

        Clipboard剪切板API如下，提供了read、write用于读写二进制数据；提供了readText、writeText用于读写文本数据。

        对于Clipboard剪切板API的可用性，官网介绍如下，

        要实现一键复制操作，我们暂时只关注writeText()方法即可，

         示例代码如下，

 /**
         * ClipBoard-异步操作方式
         * */
        document.querySelector("#clipboard-copy").addEventListener("click", async () => {
            //获取被复制的内容
            const copyData = getJSONData()
            //复制到剪切板
            if (navigator.clipboard) {
                navigator.clipboard.writeText(JSON.stringify(copyData)).then(() => {
                    console.log("复制成功")
                }, () => {
                    console.error("复制失败")
                })
            } else {
                throw new Error('当前浏览器不支持!');
            }
        })