本文介绍如何利用 `navigator.clipboard.writetext()` 原生 api，精准提取多个表单输入框的数值并拼接为连续字符串（如“000000”），彻底避免 clipboard.js 默认引入的换行与空格问题。
在开发多输入数字组合（如验证码、票号、密码片段）的“一键复制”功能时，常见痛点是：使用 Clipboard.js 直接绑定
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;
// 精确选取所有目标 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 对
