navigator.clipboard.writeText

该方法接收一个参数，为要复制到剪切板上的文本内容，如果浏览器支持该方法，直接调用该方法即可，该方法返回一个Promise。

document.execCommand("copy")

该指令允许我们复制当前选择区域的文本到剪切板上，浏览器对该方法的兼容性更好，但更推荐使用navigator.clipboad。因此我们可以将该方法作为备选方案。

document.execCommand("copy")思路

1. 将我们要复制到剪切板的内容先赋值给input标签的value属性。
2. 为input标签设置readonly属性，防止某些手机端选中input标签时弹出键盘。
3. 将该input标签设置为absolute，设置一个比较大的偏移量，让该input标签在视觉上不可见
4. 选中该input标签，调用该方法实现赋值

代码

综上，我们给出实现复制文本到剪切板的代码

const copyTextToClipboard = (text) => {
    if(navigator.clipboard){
        navigator.clipboard.writeText(text).then(()=>{
            alert('复制成功')
        },()=>{
            alert('复制失败')
        })
    }else{
        const input = document.createElement('input');
        input.setAttribute('value',text);
        input.setAttribute('readonly','readonly');
        input.style.setProperty('position','absolute');
        input.style.setProperty('left','-999999px');
        document.appendChild(input);
        input.select();
        try{
           const result = document.execCommand('copy');
            if(result){
                alert('复制成功')
            }else{
                alert('您的设备不支持')
            }
        }catch{
            alert('复制失败')
        }finally{
           document.body.removeChild(input);
        }
      
    } 
}