如何使用JavaScript实现内容复制到剪贴板（含data-value值处理）

现在主流实现用原生Clipboard API即可，代码简洁兼容性好，不需要引入第三方库，完整实现逻辑如下： #

实现步骤 #

• 给触发复制的交互元素（按钮、图标等）添加data-value属性，存入需要复制的目标内容
• 给元素绑定用户主动触发的事件（最常用的是click点击事件），在事件回调中读取data-value的存储值
• 优先调用现代浏览器原生navigator.clipboard.writeText()方法写入剪贴板，对不支持新API的旧环境用传统选中临时输入框+execCommand的方案做降级
• 复制完成后给用户明确的操作反馈即可

完整代码示例 #

HTML结构 #

<!-- 复制触发按钮，目标内容存在data-value属性中 -->
<button class="copy-trigger" data-value="需要复制的自定义内容1">复制文本1</button>
<button class="copy-trigger" data-value="需要复制的自定义内容2">复制文本2</button>

JavaScript逻辑 #

// 统一绑定所有复制触发元素的事件
document.querySelectorAll('.copy-trigger').forEach(trigger => {
  trigger.addEventListener('click', async function() {
    // 原生读取data-value属性值
    const targetContent = this.dataset.value;
    if (!targetContent) return alert('当前没有可复制的内容');

    let copySuccess = false;
    try {
      // 现代浏览器主流方案
      await navigator.clipboard.writeText(targetContent);
      copySuccess = true;
    } catch (err) {
      // 旧浏览器降级方案
      const tempInput = document.createElement('textarea');
      tempInput.value = targetContent;
      // 隐藏临时输入框，不影响页面展示
      tempInput.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
      document.body.appendChild(tempInput);
      tempInput.select();
      copySuccess = document.execCommand('copy');
      document.body.removeChild(tempInput);
    }

    // 操作反馈
    if (copySuccess) {
      const originalText = this.textContent;
      this.textContent = '已复制';
      setTimeout(() => this.textContent = originalText, 1200);
    } else {
      alert('复制失败，请手动复制内容');
    }
  })
})

注意事项 #

• 剪贴板操作必须在用户主动触发的事件回调中执行，浏览器出于安全考虑会拦截页面自动触发的剪贴板写入操作
• 用元素的dataset.value读取data-value属性是原生标准写法，不需要手动调用getAttribute方法，所有主流浏览器包括IE11都支持
• 降级用的execCommand('copy')虽然已被Web标准标记为废弃，但目前全量浏览器仍保留支持，作为兜底方案完全够用

内容的提问来源于stack exchange，提问作者Aleksey Karcev