How to copy text to clipboard on a button click using jQuery

In this tutorial, I will show you how to copy text to clipboard on a button click using jQuery. Sometimes, allowing users to copy text to clipboard on a button click event is very helpful rather than copy by normal copy procedure.

Here, in this copy text to clipboard tutorial, I will show you three examples. In the first example, you can copy text from a label on a button click event. In the second example, you can copy text from a text field. And in the third and last example, you can copy text from a textarea. After the copied text from the label, text field and textarea you can check whether the text is copied or not by pasting it into the following textarea.

How to copy text to clipboard on a button click using jQuery

Example 1 — Copy text to clipboard on a button click using jQuery

<label class="lbl1">Hi, I am text 1 from label 1, copy me.</label>
<label class="lbl2">Hi, I am text 2 from label 2, copy me.</label>
<div class="mtb-examples-fields">
   <input type="button" id="button1" class="example1" value="Copy text from label 1">
   <input type="button" id="button2" class="example1" value="Copy text from label 2">
</div>
<br>
<textarea placeholder="Paste here to check"></textarea>
//Code for the first example
$('.example1').click(function() {
  var id = $(this).attr('id');
  var text = '';
  if(id == 'button1') {
    text = $('.lbl1').text();
  } else {
    text = $('.lbl2').text();
  }

  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
  alert("Text copied! Now paste in the below textarea to check.");
});

From the above example, you can copy text to clipboard from label on a button click. We can’t copy text to clipboard from any non-editable element, that’s why we should first create an input element and append it to the body. Then get the text from the label and assign to it to the newly created input field. The document.execCommand(“copy”) function is actually responsible for copy text to the clipboard. And last we will remove the input element after copied the text.

Example 2 — Copy text to clipboard on a button click using jQuery

<div class="mtb-examples-fields">
   <input type="text" id="field1" value="Hi, I am text 1 from textbox 1, copy me.">
   <input type="text" id="field2" value="Hi, I am text 2 from textbox 2, copy me.">
</div>
<div class="mtb-examples-fields">
   <input type="button" id="button3" class="example2" value="Copy text from textbox 1">
   <input type="button" id="button4" class="example2" value="Copy text from textbox 2">
</div>
<br>
<textarea placeholder="Paste here to check"></textarea>
$('.example2').click(function() {
  var id = $(this).attr('id');
  var text = '';
  if(id == 'button3') {
    text = $('#field1').select();
  } else {
    text = $('#field2').select();
  }

  document.execCommand("copy");
  alert("Text copied! Now paste in the below textarea to check.");
});

In the above example, we copied text from text fields and the text field is editable, so we can directly copy text from it.

Example 3 — Copy text to clipboard on a button click using jQuery

<div class="mtb-examples-fields">
  <textarea id="textarea">Hi, copy text from textarea</textarea>
</div>
<div class="mtb-examples-fields">
  <input type="button" id="button5" class="example3" value="Hi, I am text from textarea, copy me.">
</div>
<br>
<textarea placeholder="Paste here to check"></textarea>
$('.example3').click(function() {
  $('#textarea').select();
  document.execCommand("copy");
  alert("Text copied! Now paste in the below textarea to check.");
});

In the above example, we can copy text to clipboard from the textarea.

Complete source code – Copy text to clipboard on a button click using jQuery

Download the complete source code of how to copy text to clipboard on a button click using jQuery from the below download link. Also, you can test the live demo by click on the below demo link. Please like and share this tutorial with others.

You may also want to read other jQuery tutorials –

Leave a Reply

Your email address will not be published. Required fields are marked *