本文介绍如何利用 navigator.clipboard.writetext() 原生 api，将多个 <input> 元素的值无缝拼接（去除空格、换行及非数字字符），并一次性复制到剪贴板，无需依赖 clipboard.js 或 jquery。
在实际开发中，为表单添加“一键复制”功能时，若直接使用 data-clipboard-target 指向整个 <form>，Clipboard.js 会默认复制其 内部所有文本节点的原始结构（包括换行符、空白符和标签间空格），导致粘贴结果形如：
00\n\n00\n\n00 —— 这显然不符合仅需纯数字串（如 000000）的业务需求。
更简洁、可控且现代的解法是：弃用第三方库，改用浏览器原生的 navigator.clipboard.writeText()。它支持异步写入纯文本，并允许你完全自定义拼接逻辑。
✅ 核心思路
- 为每个复制按钮绑定点击事件；
- 通过 data-clipboard-target 获取目标 CSS 选择器（推荐精确到 input 元素，如 #tkt_1 .circle input）；
- 使用 document.querySelectorAll() 获取所有匹配的输入框；
- 提取 .value 并通过 .map() + .join('') 无缝拼接；
- （可选）添加数据清洗，例如只保留数字：.replace(/[^0-9]/g, '')。
? 完整实现代码
<!-- HTML 结构（注意：data-clipboard-target 精确指向 input） --> <form id="tkt_1"> <div class="circle"><input type="number" value="00" min="0" /></div> <div class="circle"><input type="number" value="05" min="0" /></div> <div class="circle"><input type="number" value="12" min="0" /></div> </form> <div class="btn_copy" data-clipboard-target="#tkt_1 .circle input">Copy</div> <form id="tkt_2"> <div class="circle"><input type="number" value="99" min="0" /></div> <div class="circle"><input type="number" value="00" min="0" /></div> <div class="circle"><input type="number" value="77" min="0" /></div> </form> <div class="btn_copy" data-clipboard-target="#tkt_2 .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;
const inputs = document.querySelectorAll(selector);
const values = Array.from(inputs)
.map(input => input.value || '') // 防空值
.map(val => val.replace(/[^0-9]/g, '')) // 【关键】仅保留数字（可选）
.join(''); // 无缝拼接，无分隔符
try {
await navigator.clipboard.writeText(values);
console.log(`Copied: "${values}"`);
// ✅ 可在此添加成功提示（如 Toast）
} catch (err) {
console.error('Failed to copy: ', err);
// ❌ 建议 fallback：降级使用 document.execCommand（仅旧版浏览器）
}
});
});⚠️ 注意事项
- 权限要求：navigator.clipboard 需在安全上下文（HTTPS 或 localhost）中运行，否则会抛出 SecurityError；
- 用户交互触发：必须在用户显式操作（如 click）中调用，不可在异步回调或定时器中直接执行；
- 兼容性：Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+ 均已支持；如需兼容更低版本，可封装 execCommand 降级逻辑；
- 输入校验建议：在拼接前对 input.value 做空值/非数字过滤，避免意外粘贴空字符串或 NaN；
- 样式优化：示例中 .btn_copy 的 padding 和 width 存在冲突（width: 50px 但 padding: 15px 50px），建议改为 width: auto; padding: 15px 20px; 以确保文字居中显示。
✅ 总结
相比 Clipboard.js 的声明式绑定，原生 navigator.clipboard.writeText() 提供了更高的灵活性与可控性。通过精准选择器 + 数组链式处理（.map().join('')），你不仅能彻底消除换行与空格，还能自由扩展逻辑——例如自动补零、添加分隔符、格式化为手机号等。这既是轻量化的最佳实践，也是现代 Web 开发中“优先使用原生 API”的典型范例。
