本文介绍如何利用 `navigator.clipboard.writetext()` 原生 api，精准提取多个表单输入框的数值并拼接为连续字符串（如“000000”），彻底避免 clipboard.js 默认引入的换行与空格问题。
在开发多输入数字组合（如验证码、票号、密码片段）的“一键复制”功能时，常见痛点是：使用 Clipboard.js 直接绑定 <form> 元素后，各 <input> 的值会以换行符（\n）或空格分隔，导致粘贴结果为：
00 00 00
而非期望的紧凑格式 000000。此时无需依赖第三方库——现代浏览器已全面支持更灵活、更可控的原生剪贴板 API：navigator.clipboard.writeText()。
✅ 推荐方案：纯原生 JavaScript 实现
核心思路是：
- 通过 data-clipboard-target 指定精确的选择器（如 #tkt_1 .circle input），而非整个 <form>；
- 主动收集所有匹配 <input> 的 value，过滤空值，并用空字符串 '' 连接；
- 调用 navigator.clipboard.writeText() 写入纯净文本。
以下是完整可运行代码：
立即学习“Java免费学习笔记（深入）”；
<!-- HTML 结构（关键：target 指向 input 元素，非 form） --> <form id="tkt_1"> <div class="circle"><input type="number" value="00" min="0" /></div> <div class="circle"><input type="number" value="00" min="0" /></div> <div class="circle"><input type="number" value="00" min="0" /></div> </form> <div class="btn_copy" data-clipboard-target="#tkt_1 .circle input">Copy</div>
// 获取所有复制按钮
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;
// 精确选取所有目标 input 元素
const inputs = document.querySelectorAll(selector);
const values = Array.from(inputs)
.map(input => input.value.trim()) // 清除首尾空白（防 placeholder 干扰）
.filter(val => val !== '') // 过滤空值
.join(''); // 无缝拼接：无空格、无换行
try {
await navigator.clipboard.writeText(values);
console.log('Copied:', values); // 可选：添加成功提示
} catch (err) {
console.error('Failed to copy: ', err);
alert('复制失败，请检查浏览器权限或重试');
}
});
});⚠️ 注意事项与增强建议
- 浏览器兼容性：navigator.clipboard 支持 Chrome 66+、Firefox 63+、Edge 79+、Safari 16.4+。旧版需降级方案（如 document.execCommand），但本文聚焦现代标准。
- 安全限制：该 API 仅在安全上下文（HTTPS 或 localhost）中可用，HTTP 站点将抛出 SecurityError。
-
输入值预处理：若需强制补零（如 5 → 05）、去除非数字字符，可在 .map() 中加入逻辑：
.map(input => String(input.value).padStart(2, '0').replace(/\D/g, ''))
- 用户体验优化：点击后可临时修改按钮文字为 “Copied!” 并延时还原，提升反馈感。
✅ 总结
放弃 Clipboard.js 对 <form> 的粗粒度绑定，改用原生 navigator.clipboard.writeText() + 精确 CSS 选择器，不仅能彻底消除换行与空格干扰，还减少了依赖、提升了可控性与可维护性。对于数字类组合复制场景，这是更简洁、更健壮、更符合现代 Web 标准的实践方案。
