本文介绍如何利用 navigator.clipboard.writetext() 原生 api，将多个 元素的值无缝拼接（去除空格、换行及非数字字符），并一次性复制到剪贴板，无需依赖 clipboard.js 或 jquery。

在实际开发中，为表单添加“一键复制”功能时，若直接使用 data-clipboard-target 指向整个

  
  
  

Copy


  
  
  

Copy

// 获取所有复制按钮
const copyButtons = document.querySelectorAll('.btn_copy');

Array.from(copyButtons).forEach(button => {
  button.addEventListener('click', async () => {
    const selector = button.getAttribute('data-clipboard-target');
    if (!selector) return;

    const inputs = document.querySelectorAll(selector);
    const values = Array.from(inputs)
      .map(input => input.value || '')           // 防空值
      .map(val => val.replace(/[^0-9]/g, ''))   // 【关键】仅保留数字（可选）
      .join('');                                // 无缝拼接，无分隔符

    try {
      await navigator.clipboard.writeText(values);
      console.log(`Copied: "${values}"`);
      // ✅ 可在此添加成功提示（如 Toast）
    } catch (err) {
      console.error('Failed to copy: ', err);
      // ❌ 建议 fallback：降级使用 document.execCommand（仅旧版浏览器）
    }
  });
});

⚠️ 注意事项

• 权限要求：navigator.clipboard 需在安全上下文（HTTPS 或 localhost）中运行，否则会抛出 SecurityError；
• 用户交互触发：必须在用户显式操作（如 click）中调用，不可在异步回调或定时器中直接执行；
• 兼容性：Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+ 均已支持；如需兼容更低版本，可封装 execCommand 降级逻辑；
• 输入校验建议：在拼接前对 input.value 做空值/非数字过滤，避免意外粘

  

  贴空字符串或 NaN；
• 样式优化：示例中 .btn_copy 的 padding 和 width 存在冲突（width: 50px 但 padding: 15px 50px），建议改为 width: auto; padding: 15px 20px; 以确保文字居中显示。

✅ 总结

相比 Clipboard.js 的声明式绑定，原生 navigator.clipboard.writeText() 提供了更高的灵活性与可控性。通过精准选择器 + 数组链式处理（.map().join('')），你不仅能彻底消除换行与空格，还能自由扩展逻辑——例如自动补零、添加分隔符、格式化为手机号等。这既是轻量化的最佳实践，也是现代 Web 开发中“优先使用原生 API”的典型范例。