本文介绍如何利用 `navigator.clipboard.writetext()` 原生 api，精准提取多个表单输入框的数值并拼接为连续字符串（如“000000”），彻底避免 clipboard.js 默认引入的换行与空格问题。

在开发多输入数字组合（如验证码、票号、密码片段）的“一键复制”功能时，常见痛点是：使用 Clipboard.js 直接绑定

元素后，各 的值会以换行符（\n）或空格分隔，导致粘贴结果为：

00
00
00

而非期望的紧凑格式 000000。此时无需依赖第三方库——现代浏览器已全面支持更灵活、更可控的原生剪贴板 API：navigator.clipboard.writeText()。

✅ 推荐方案：纯原生 JavaScript 实现

核心思路是：

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

• 通过 data-clipboard-target 指定精确的选择器（如 #tkt_1 .circle 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 对

的粗粒度绑定，改用原生 navigator.clipboard.writeText() + 精确 CSS 选择器，不仅能彻底消除换行与空格干扰，还减少了依赖、提升了可控性与可维护性。对于数字类组合复制场景，这是更简洁、更健壮、更符合现代 Web 标准的实践方案。