How can i copy in clipboard with jquery

Question

how can I copy the content of the element into the clipboard when I click on an element.

<h1 class="copy"> i want to copy this text on clipboard when I click on an element.</h1>
<p> i want to copy this text on clipboard<p>

Is it possible to copy without creating any element? Is there a solution similar to this?

$(function (){
$("h1").click(function (){
   $(this).select();
   document.execCommand("copy");
});

});

How can I do this with jquery or regular javascript. Or what are your other suggestions? Thanks

https://stackoverflow.com/questions/36639681/how-to-copy-text-from-a-div-to-clipboard — Muhammad Asif, Jun 02 '21 at 11:25
Does this solve your issue? https://www.30secondsofcode.org/blog/s/copy-text-to-clipboard-with-javascript — ciekals11, Jun 02 '21 at 11:25

score 4 · Accepted Answer · answered Jun 02 '21 at 11:31

4

You can use the navigator clipboard API. It is supported by all modern browsers.

document.querySelector(".copy").onclick = (e) => {
  navigator.clipboard.writeText(e.currentTarget.innerText);
}

answered Jun 02 '21 at 11:31

mockingjay

181
1
10

score 0 · Answer 2 · answered Jun 02 '21 at 12:11

html:

<h1><button class="copy"> i want to copy this text on clipboard when I click on an element.</button></h1>

jquery:

$(".copy").on('click', function (){
  var text = $(this).text()
  console.log(text)
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();

});

How can i copy in clipboard with jquery

2 Answers2