CODEWITHSUNDEEP
javascripthtmlcssdynamic-programmingdynamic-html
user14881722
user14881722

Reputation:

How to create copy button using html and javascript?

Hii am new to javascript but by putting my all efforts I have written a javascript to copy text inside a <p></p> elements. In my website I need the copy button many times. But my javascript work for only one copy button. if I used it to another copy button it would copy the first button's respective <p>/p> text. My javascript

const copyButton = document.querySelector('.copyButton');
const copyalert = document.querySelector('.copyalert');

copyButton.addEventListener('click', copyClipboard);

function copyClipboard() {
  var copystatus= document.getElementById("randomstatus");
// for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(copystatus);
    range.select();
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
  else if(window.getSelection) {
// other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(copystatus);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
}

My html

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">
       <p class=latest>life os good when hou have books</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
</div>
<div class="latestquotes">
       <p class=latest>Google is a open source library</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
<div class="latestquotes">
       <p class=latest>Cat is better than dog</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
  </div>
  </div>

Upvotes: 4

Views: 6564

Answers (4)

Mohammad Nadr
Mohammad Nadr

Reputation: 548

use this

<button @click="copyMe('Copied')">Copy Your Code</button>

'''''

function copyMe(){
  navigator.clipboard.writeText("Copy Clipboard");
}

'''''''

Upvotes: 1

Renato C.Francisco
Renato C.Francisco

Reputation: 157

Since document.execCommand('copy') is deprecated, you can use navigator.clipboard.writeText, just need to check for browser compatibility, like Ragul CS said. For more information, check this question.

copyButton.addEventListener("click", async function () {
    const code = 'text to copy';
    await navigator.clipboard.writeText(code);
});

Upvotes: 1

Ken Lee
Ken Lee

Reputation: 8103

You just need to let the system knows the id of the text you want to copy , e.g. p1, p2, p3.

Please try this

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">

       <p><div id=p1>life os good when hou have books</div></p> 
       <button class="copyButton btn" onclick="copyToClipboard('p1')">Copy</button>

</div>

 

<div class="latestquotes">

       <p><div id=p2>Google is a open source library</div></p>
       <button class="copyButton btn" onclick="copyToClipboard('p2')">Copy</button>

   </div>

 

<div class="latestquotes">

       <p><div id=p3>Cat is better than dog</div></p>
       <button class="copyButton btn" onclick="copyToClipboard('p3')">Copy</button>

   </div>
  </div>
  </div>


<script>


function copyToClipboard(var1){
    let val = document.getElementById(var1).innerHTML;
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    alert('text copied to clipboard, please use Ctrl-V to paste the data');

  }  


</script>

Upvotes: 5

sonEtLumiere
sonEtLumiere

Reputation: 4572

You have to create a text area, append to body and apply execCommand function, then you can remove the textarea from your DOM, try this:

function copyToClipboard(){
    let val = 'text to copy';
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    alert('text copied to clipboard');
  }
<button type=button onclick="copyToClipboard()">Copy</button>

Upvotes: 2

Related Questions