本文介绍如何通过 navigator.clipboard.writetext() 原生 api，将多个表单输入框的数值无缝拼接（无空格、无换行）后一键复制到剪贴板，无需依赖 clipboard.js 或 jquery。
在实际开发中，为多输入表单添加“一键复制”功能时，若直接使用 data-clipboard-target 指向 <form> 元素（如 Clipboard.js 默认行为），浏览器会按 HTML 结构顺序复制其所有子文本内容——包括换行符、空白符和标签间隐式空格，导致粘贴结果如 "00\n00\n00"，不符合纯数字连续输出（如 "000000"）的需求。
解决的关键在于绕过 HTML 文本提取逻辑，主动采集并清洗输入值。现代浏览器已普遍支持 navigator.clipboard.writeText()，它接受任意字符串，因此我们可完全自主控制拼接逻辑：
✅ 推荐方案：原生 JS + 精准选择器
首先，将 data-clipboard-target 的值从 #tkt_1（整个表单）改为 #tkt_1 .circle input（精准定位每个 <input> 元素），确保只读取输入框的 value 属性：
<form id="tkt_1"> <div class="circle"><input type="number" value="12" min="0" /></div> <div class="circle"><input type="number" value="34" min="0" /></div> <div class="circle"><input type="number" value="56" min="0" /></div> </form> <div class="btn_copy" data-clipboard-target="#tkt_1 .circle input">Copy</div>
然后，使用以下轻量脚本实现无干扰拼接：
立即学习“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')（需创建临时 <textarea>）。
-
数字格式化：若需补零（如 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 表单复制场景的最佳实践。
