javascript 复制到剪贴板,不带空格或换行符

jc3wubiy  于 2023-08-02  发布在  Java
关注(0)|答案(2)|浏览(200)

我正试图开发一个“复制”按钮,以复制数字从多输入形式到剪贴板。我安装了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>
0pizxfdo

0pizxfdo1#

你不需要一个特殊的库把东西放进剪贴板。使用navigator.clipboard.writeText()即可
这是你的代码,但不需要clipboard.js甚至jQuery。

//Select all of the `.btn_copy` elements - this returns a NodeList
const copyButtons = document.querySelectorAll('.btn_copy');

//Convert the NodeList of button elements into an array of button elements
Array.from(copyButtons)
  //Now loop through each button element
  .forEach((thisButton) => {
  
    //Inside of this loop we attatch a click event listener to each button
    thisButton.addEventListener('click', (clickEvent) => {
      //When the button in clicked...
      
      //We get the value of the `data-clipboard-target` attribute on the button that was clicked
      //This is just a string with a CSS selector in it
      const clipboardTarget = thisButton.getAttribute('data-clipboard-target');

      //Now we use the CSS selector that we found to select the elements we want
      //Again this will return a NodeList
      const inputElements = document.querySelectorAll(clipboardTarget)
      
      //Convert the NodeList into an Array of elements
      const combined = Array.from(inputElements)
        //Convert this array of elements into an array of the values on each input element
        .map((element) => {
          //Basically this it a loop that returns the `value` property on each element as a string
          //This will be an array of strings
          //FTI: If you want to manipulate the value (like prefixing numbers with a 0) - you do that here
          return element.value;
        })
        //Convert this array of strings into a single string by joining all the parts together
        //The string passed in below will be inserted between each array item as they ar joined together
        //This can be any string
        .join('');
      
      //Now we have a final string assembled
      //Put that string into the clipboard!
      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;
}

.clear{clear: both;}
<div>
<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>

<div class="clear"></div>
<hr>

<form id="tkt_2">
  <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_2 .circle input">Copy</div>
ssgvzors

ssgvzors2#

要从字符串中删除任何空格或换行符,可以使用replace方法,其中'\n'用于换行符,' '用于空格。

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

字符串
请记住,copy(formatedText)语句只是一个符号。使用您想要或需要的任何内容将值复制到剪贴板。

相关问题