Copy Text to ClipBoard event using Javascript

Accessing copy to ClipBoard event using Javascript

This Blog describes, how we can copy to clipboard using JavaScript. Copying content from a web form without needing to use the default browser functions. For this i am using ZeroClipboard functionality in the JavaScript.

Following are the steps to develop this code.

1. Create a new web application.

2. Include ZeroClipboard.js file in to your web application location or you can use online link mentioned below

 <script src="http://zeroclipboard.org/javascripts/zc/v2.1.6/ZeroClipboard.js"></script>

3.Here is the following code you have to add in script, HTML, and can add styles(CSS) for it.

<div class="email-modal">
<div >
  <div role="document">
        <h4>Text To Copy:</h4>
      <div class="modal-body">
         <textarea class="text_copy" rows="5" cols="100" >text to Copy</textarea>
      </div>
      <br>
      <div>
        <button id='clip_board' data-clipboard-text="" class="copy-button">Copy to ClipBoard</button>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://zeroclipboard.org/javascripts/zc/v2.1.6/ZeroClipboard.js"></script>
<script type="text/javascript">
$('#clip_board').attr('data-clipboard-text', $(".text_copy").text())
window.onload = function(){
    var client = new ZeroClipboard(document.getElementsByClassName("copy-button") );
    client.on( "ready", function( readyEvent ) {
      client.on( "aftercopy", function( event ) {
        alert("Copied.." );
      });
    });
  }
</script>

Here "copy-button" is "button class" mentioned in the html whis reads your html markup content.

Posted On 03 February 2016 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Setting up reactjs environment & first reactjs app(hello-world)

create your first react application hello-world from scratch. A step by step guide to understand and setup the reactjs environment. Understand the node package manager …

Continue Reading...
How to drag and drop multiple files using Dropzone.js

Dropzone is a free open source library which makes a HTML element as dropzone, which enables user to drag files on to that area and …

Continue Reading...
How to use jQuery mobile touch events

JQuery mobile touch events - Event is nothing but all possible and different actions of visitors that a webpage can respond to. We have the …

Continue Reading...
Copy Text to ClipBoard event using Javascript

Here you can learn about copy to clipboard using JavaScript. Copying content from a web form without needing to use the default browser functions. For …

Continue Reading...
Using CasperJS to scrape website data

CasperJS can be used for Navigation Scipting, Scraping and testing. In this Tutorial we will see how to scrape data from website using CasperJS and …

Continue Reading...

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties