本文介绍如何通过 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 表单复制场景的最佳实践。
