Copy text or html to clipboard js php

How to copy text or HTML to clipboard using JS/jQuery

Today we learn how to copy texts and html into the clipboard by using js, we can copy content on button click or any event through JS.


Here are the few simple methods for it. Please follow the below methods

1) Copy data-attribute value to clipboard

  If you have an html element like a button with data value and you want to copy value on button click then use below function

HTML CODE

<a class="cls_copy_pg_action copyAction copy-action-btn" data-value="THIS TEXT WILL BE COPIED"> <i class="far fa-copy"></i> Copy</a>

JQUERY CODE

$(document).on("click", ".copy-action-btn", function() { 
      var trigger = $(this);
      $(".copy-action-btn").removeClass("text-success");
      var $tempElement = $("<input>");
        $("body").append($tempElement);
        var copyType = $(this).data("value");
        $tempElement.val(copyType).select();
        document.execCommand("Copy");
        $tempElement.remove();
        $(trigger).addClass("text-success");

  });

The above code will copy the data into clipboard. 

2) Copy INPUT field value on button click

HTML CODE

<input type="text"  value="THIS TEXT WILL BE COPIED" id="idInputField">
<button class="clsCopyBtn" onclick="copyFunction()">Copy Action</button>

JQUERY CODE

 function copyFunction() 

 {
      var trigger = $(this);
      $(".copy-action-btn").removeClass("text-success");
      var $tempElement = $("<input>");
      $("body").append($tempElement);
      var copyType = $("#idInputField").val();
      $tempElement.val(copyType).select();
      document.execCommand("Copy");
      $tempElement.remove();
      $(trigger).addClass("text-success");
  };

3) Copy to the clipboard using PURE JAVASCRIPT

  If you dont want to use jQuery then you can do copy work with javascript too. Please 
 use below function

function copyFunction() {
  var copyInputContent = document.getElementById("idInputField");
  copyInputContent.select();
  document.execCommand("copy");

}  

4) Copy HTML of a HTML element

 If you want to copy html of a HTML element like a div then you dont need to use clipboard
. you can get html of element and save into a variable


 
function copyFunction() 
 {
      var trigger = $(this);
      $(".copy-action-btn").removeClass("text-success");
      var $tempElement = $("<input>");
      $("body").append($tempElement);
      var copyType = $(".text-pages-heading").html();
      $tempElement.val(copyType).select();
      document.execCommand("Copy");
      $tempElement.remove();
      $(trigger).addClass("text-success");
  };