如何使用原生 JavaScript 实现无空格、无换行的多输入框内容一键复制

本文介绍如何利用 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”的典型范例。