复制到剪贴板，不带空格或换行

Question

我正在尝试开发一个“复制”按钮来将数字从多输入表单复制到剪贴板。我安装了 Clipboard.js 并将 id 指向

<form>

元素，因此一切正常，除了每个输入的数字在复制时中间有一条断线。有什么办法可以删除中间的空格或换行吗？

我应该在某处添加

.replace(/[^0-9]/g, "")

吗？

new ClipboardJS('.btn_copy', {
});

.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;
}

<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" data-clipboard-target="#tkt_1">Copy</div>

Answer 1

要从字符串中删除任何空格或换行符，您可以使用

replace

方法，其中

'\n'

表示换行符，

' '

表示空格。

const formatedText = str.replace('\n', '').replace(' ', '')
copy(formatedText)

请记住，声明

copy(formatedText)

只是象征性的。使用您想要或需要的任何内容将值复制到剪贴板。

Answer 2

您不需要特殊的库来将内容放入剪贴板。只需使用

navigator.clipboard.writeText()

这是与您相同的代码，但不需要 Clipboard.js 甚至 jQuery。

const inputs = document.querySelectorAll('.circle input');
const copyBtn = document.querySelector('.btn_copy');

copyBtn.addEventListener('click', ev =>{
  const combined = Array.from(inputs).map(x => x.value).join(':');
  navigator.clipboard.writeText(combined);
});

.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;
}

<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" data-clipboard-target="#tkt_1">Copy</div>