Skip to main content

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");
  };

Comments

  1. Awsssmmmm post bro keep it up great work
    https://gajabwap.blogspot.com

    ReplyDelete
  2. Website Speed Optimization is using the strategies and techniques to speed up your site & make it faster to load in the web browsers. If your website loads slowly then you will lose your site rankings in search engine results. It requires a lot of efforts & tweaks to optimize your website speed. I have listed over 5 website speed optimization tips to increase your website speed. Moreover, you can use these techniques for both WordPress & Non-WordPress.

    ReplyDelete
  3. wonderful article buddy...!! I hope it will be fruitfull for me. Thank you so much and keep posting.

    Mobile App Ideas
    Web Development
    Dating App Development Company

    ReplyDelete
  4. Your Affiliate Money Making Machine is waiting -

    Plus, earning money online using it is as easy as 1..2..3!

    Here are the steps to make it work...

    STEP 1. Choose affiliate products the system will push
    STEP 2. Add push button traffic (this ONLY takes 2 minutes)
    STEP 3. See how the affiliate system explode your list and sell your affiliate products on it's own!

    Do you want to start making money???

    Click here to launch the system

    ReplyDelete
  5. Your article is very good. I'm following you.I understand exactly what you mean today. I had been to many blogs before but could not understand it. So I was very impressed when I read your article. Thank you very much for this.


    hi guys, if you want earn money in one day, so click here.


    Online Friendship Club
    Dating friendship
    Free Online Dating Site
    Online Dating
    Matchmaker
    Dating friendship

    ReplyDelete
  6. Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me.
    web designing course in chennai

    ReplyDelete
  7. How To Clone Or Duplicate Html Element Using Jquery

    Learn how to clone or duplicate html element using jquery.

    For More Info:- How To Clone Or Duplicate Html Element Using Jquery

    ReplyDelete
  8. WanlitOgrat-ne Brian Thao click
    smithasoblu

    ReplyDelete

Post a Comment

Popular posts from this blog

Run and compile sass scss file to css using node

  Today we learn how to use scss and generate css using node  or Run and compile sass scss file to css using node   So please follow simple  steps :-   Today we will create a project that can read scss file and generates css with it  Note: Make sure you have installed node in your system. If you want to help to install node js based on your system then check our other tutorial or check node js official website. Now create a blank folder and open  terminal(linux) or cmd(windows) and navigate to your current project folder by using cd command Now run below command npm init after enter it will ask you some package info that you can fill according to you or just keep enter until it finished. The above command will generate package.json file Now  we will install npm module that will convert our scss to css Run below command: npm install node-sass So we have installed node-sass package . Now open package.json file in your editor and add below code into it into

jQuery Datatable add date range filter

jQuery Datatable add date range filter Datatable is most useful jQuery plugin that helps to make our html tables more powerful and give powers to user to filter , search, sort, pagination etc, But Data table provides a common filter only and yes we can customize and add filter for each column, but still sometimes we need an advance filter like show results only between a date range, So today we will learn how to create a minimum and maximum date range fields and show date picker on it, and user can fill dates by selecting dates and data table will auto filter records based on it. Keep follow below steps :- I am using Bootstrap if you want to use any other framework then you can use. Create a new index.php file  and paste below code in it, i have used all required CDN like bootstrap, datatable, datepicker etc. <!DOCTYPE html> <html> <head>     <title>Datatable Date Range Filter Example</title>     <link rel="stylesheet" href="https://maxcd

How to retrieve Facebook Likes, share , comment Counts

function facebook_count($url){     // Query in FQL     $fql  = "SELECT share_count, like_count, comment_count ";     $fql .= " FROM link_stat WHERE url = '$url'";     $fqlURL = "https://api.facebook.com/method/fql.query?format=json&query=" . urlencode($fql);     // Facebook Response is in JSON     $response = file_get_contents($fqlURL);     return json_decode($response); } $fb = facebook_count('https://www.facebook.com/BahutHoGyiPadhai'); // facebook share count echo $fb[0]->share_count;  echo "like"; // facebook like count echo $fb[0]->like_count ; echo "comment"; // facebook comment count echo $fb[0]->comment_count;  ?>