Question 218850 in Html Question posted in
Some basic documentation can be found here.

Html – Copy to Clipboard without space or break lines

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    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" 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-action="copy" data-clipboard-target="#tkt_1">Copy</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search