Copy to Clipboard without space or break lines

Question

I am trying to develop a "copy" button to copy numbers from a multi input form to the clipboard. I installed Clipboard.js and, point the id to the <form> element so, everything works fine except that the numbers of each input are copied with a break line between them. Is there any way to remove any space or break line in between?

Should I add .replace(/[^0-9]/g, "") somewhere?

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

You don't need a special library to put things into the clipboard. Just use navigator.clipboard.writeText()

Here's your same code but without needing clipboard.js or even 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>

Answer 2

To remove any space or line break from a string you can use the replace method with '\n' for the line break and ' ' for the space.

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

Keep in mind that the statement copy(formatedText) is just symbolic. Use anything you want or need to copy the value to the clipboard.