实现复制粘贴功能: navigator.clipboard 踩坑navigator.clipboard 在不安全的域下是

作为一个四年前端，已经不是新人了，今天被一个小坑折腾了一下午才搞定

起因是需求中要求实现一个复制指定内容到剪切板的功能，以前也做过类似功能，代码简简单单写好

const copyToClipboard = (text: string) => {
    // ... 省略提示和 Promise 包装
    if (navigator.clipboard) {
        navigator.cliboard
            .writeText(text)
            .then(() => console.log('success'));
    } else {
        // 此方法已不推荐，尽量少用
        const textarea = document.createElement('textarea');
        document.body.appendChild(textarea);
        // textarea.setAttribute('value', val); //非实时
        textarea.value = val;
        textarea.select();
        document.execCommand('copy', true); // 没有 true 可能会因为安全策略复制失败
        document.body.removeChild(textarea);
    }
}

简简单单的几行代码踩了两个坑

首先是测试说测试环境复制不了内容，本地测依旧没有问题然后就是---网页版、客户端、测试地址、本地地址，各种忽然可以忽然不可以，折腾半天用原始的 console.log 方法，发现 navigator.clipboard 被判断为 undefined，然后直接在测试环境 devtools 里输出看还是 undefined，查看 MDN 提供的版本信息和 Chrome 内核版本发现没问题，怀疑是客户端内核的问题。。。不说经过了，直接答案

navigator.clipboard 只能在 localhost 和安全的域下使用，不安全的域下会是 undefined(公司太抠了，域名证书不是那种正规的公司颁发的，被认证为不安全域名)
这里的元素不要用 input 否则换行会失效
textarea.setAttribute('value', val) 不是实时生效的，尽量用 textarea.value = val 实时改变，document.execCommand('copy', true) 需要元素文本被选中，如果没有实时生效的话会复制不到设置的内容