Copy text inside of any tag to clipboard using JS

Question

I need to copy the text that is inside of ~p~ tag, I've tryed using this code:

HTML:

<p id="copy">Text to copy</p>
<button onclick="copyFunction()">Copy text</button>

JS:

function copyFunction() {
   var textToCopy = document.getElementById("copy");
   textToCopy.select();
   document.execCommand("copy");
   alert("Copied the text: " + textToCopy.value);
}

But it didn't worked.

Have you tried using something like [clipboard js](https://clipboardjs.com/). Used it few times and works well and good browser support as well. — Hozefa, Aug 09 '18 at 04:35
Simply refer to w3 school: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp — Raghbendra Nayak, Aug 09 '18 at 04:37
You can also see: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — Raghbendra Nayak, Aug 09 '18 at 04:38

score 2 · Accepted Answer · answered Aug 09 '18 at 05:22

function copyFunction() 
{
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($('#copy').text()).select();
    document.execCommand("copy");
    $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="copy">Text to copy</p>
<button onclick="copyFunction()">Copy text</button>

score 0 · Answer 2 · answered Aug 09 '18 at 04:41

0

You can also use window.clipboardData.setData("text/plain", Your text from p tag);

answered Aug 09 '18 at 04:41

Simranjit Singh

394
1
6

score 0 · Answer 3 · answered Aug 09 '18 at 04:48

You can go like this. Not tested but it can work.

   const ptag = document.querySelector("p");

   ptag.onclick = function() {
      document.execCommand("copy");
   }

   ptag.addEventListener("copy", function(event) {
      event.preventDefault();
      if (event.clipboardData) {
         event.clipboardData.setData("text/plain", ptag.textContent);
         console.log(event.clipboardData.getData("text"))
      }
   });

Now click on the <p> tag. Text from that tag will be copied to your clipboard.

Copy text inside of any tag to clipboard using JS

3 Answers3

Linked

Related