如何用Clipboard.js复制多输入框数字时去除空格与换行？

直接把目标指向<form>元素时，Clipboard.js会读取整个表单的文本内容，自然会包含HTML结构里的换行、空格。你可以通过自定义text函数手动拼接输入框的数值，同时用正则过滤掉非数字内容，完美解决这个问题：

修改后的JavaScript代码 #

new ClipboardJS('.btn_copy', {
  text: function(trigger) {
    // 获取表单内所有数字输入框
    const numberInputs = document.querySelectorAll('#tkt_1 input[type="number"]');
    // 收集每个输入框的有效值，拼接成连续字符串
    let result = Array.from(numberInputs)
      .map(input => input.value.trim()) // 去掉单个输入值的首尾空格
      .join(''); // 直接拼接，无额外空格/换行
    // 最后过滤掉所有非数字字符（保险起见）
    return result.replace(/[^0-9]/g, '');
  }
});

为什么这样有效？ #

• 不再依赖表单的自动文本提取，主动获取每个输入框的数值，完全控制复制内容
• trim()确保单个输入值的首尾无空格
• join('')直接把多个输入值连在一起，不会产生换行或空格
• 最后的正则替换可以过滤掉任何意外混入的非数字字符（比如用户误输入的空格）

完整代码示例 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.js"></script>

<form id="tkt_1">
  <div class="circle">
    <input type="number" placeholder="00" />
  </div>
  <div class="circle">
    <input type="number" placeholder="00" />
  </div>
  <div class="circle">
    <input type="number" placeholder="00" />
  </div>
</form>

<div class="btn_copy" data-clipboard-action="copy">Copy</div>

（注：data-clipboard-target可以去掉，因为自定义text函数已指定复制内容）

CSS #

.btn_copy {
  background: rgba(50, 50, 90, 1);
  min-height: 30px;
  width: 50px;
  padding: 15px 50px;
  color: #e1e1e1;
  font-family: sans-serif;
  font-size: 1.2em;
  display: inline-block;
  margin-left: 50px;
  cursor: pointer;
}

.btn_copy:hover {
  background: rgba(50, 50, 90, 0.9);
}

.circle input {
  border-radius: 999px;
  float: left;
  max-width: 100px;
  font-size: 2em;
  text-align: center;
  height: 100px;
}

内容的提问来源于stack exchange，提问作者Freddan