如何使用原生 JavaScript 实现无空格无换行的剪贴板复制

本文介绍如何通过 navigator.clipboard.writetext() 原生 api，将多个表单输入框的数值无缝拼接（无空格、无换行）后一键复制到剪贴板，无需依赖 clipboard.js 或 jquery。

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

   
   
   
  
copy

然后，使用以下轻量脚本实现无干扰拼接：

立即学习“Java免费学习笔记（深入）”；

document.querySelectorAll('.btn_copy').forEach(button => {   button.addEventListener('click', () => {     const selector = button.getAttribute('data-clipboard-target');     const inputs = document.querySelectorAll(selector);      // 提取每个 input 的 value，并过滤空值，再拼接为纯字符串     const textToCopy = Array.from(inputs)       .map(input => input.value.trim()) // 清除首尾空格（防用户误输）       .filter(value => value !== '')     // 跳过空输入框       .join('');                       // 无分隔符连接 → "123456"      navigator.clipboard.writeText(textToCopy)       .then(() => console.log('Copied:', textToCopy))       .catch(err => console.error('Copy failed:', err));   }); });

⚠️ 注意事项与增强建议

• 兼容性：navigator.clipboard 需在 https 环境或 localhost 下运行；旧版浏览器可降级使用 document.execCommand(‘copy’)（需创建临时 ）。
• 数字格式化：若需补零（如 7 → “07”），可在 .map() 中处理：

  .map(input => String(input.value).padStart(2, '0'))

• 防注入：value 是用户可控内容，但 join(”) 本身不执行代码；如需严格数字校验，可加 .replace(/D/g, ”)（仅保留数字）：

  .map(input => input.value.replace(/D/g, ''))

• 用户体验：建议添加复制成功提示（如 Toast），并禁用按钮短暂时间防止重复点击。

此方案简洁、可靠、无第三方依赖，且完全掌控输出格式——无论是去除空格、合并数字，还是添加分隔符（如 .join(‘-‘)），均可灵活调整，是现代 Web 表单复制场景的最佳实践。