一键复制文本

一键复制文本是一个很快捷方便的操作，那在前端应该怎么实现呢？

前端的实现大致分为两种方式：

1. 使用dom来完成操作
2. 使用浏览器的API

实现

dom

我们通过dom操作，新建一个input元素，在这个元素上执行copy命令，最后不要忘记再删除这个元素。

function copyToClipboard(text) {
    // 新建一个input元素
    const el = document.createElement('input');
    // 设置input的值为要复制的值
    el.value = text;
    // 设置input为只读
    el.setAttribute('readonly', '');
    // 在body中加上这个元素
    document.body.appendChile(el);
    // 选择这个元素
    el.select();
    // 执行copy命令
    document.execCommand('copy');
    // 删除元素
    document.body.removeChild(el);
}

navigator.clipboard.writeText

利用浏览器API进行复制可能要考虑兼容性问题

// 复制文本到剪贴板的函数 
async function copyToClipboard(text) {
    try { 
        // 调用writeText方法复制文本 await navigator.clipboard.writeText(text); 
        console.log('已复制文本: ', text); 
        // 可以在这里添加一些用户反馈，比如显示一个消息说文本已复制 
    } catch (err) { 
        // 复制失败时的处理 console.error('复制文本失败: ', err); 
    } 
}