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.

Subscribe To our news letter

Subscribe to our news letter to receive latest blog posts into your inbox. Please fill your email address in the below form.
*We don't provide your email contact details to any third parties
Latest Comments
Related Articles
jQuery mouse events and touch events Vidyasagar Rudraram

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler ...

Continue Reading...
Image Cropping in Jquery (with Jcrop) Chaitanya Kattineni

We are having many image cropping plugins developed in jquery that are being used to crop an image. Jcrop is one of the plugins developed ...

Continue Reading...
Get tweets with Javascript Ashwin Kumar

Due to change in twitter API, its been hard to get tweets from twitter to your site using javascript. We got new API version 1.1 ...

Continue Reading...