Copy Text to Clipboard Jquery JavaScript

Working with Clipboard in web page is have some security restriction on browser such Firefox and internet explorer. Here is the solution to copy text to clipboard with jQuery without any browser restriction.

zClip the effective clipboard handling jQuery with Flash Support we can make copy any region of text range with custom style and animated interface let us create it one example.

<h2>Copy Text to Clipboard Jquery JavaScript</h2>

<div style="padding:10px; border:1px dashed #ccc;">
<p id="description">
Welcome to ZeroClipBoard
</p>
<a id="copy-description">Copy above Text to Clipboard</a>

</div>
<br />

<textarea id="dynamic" style="padding:10px; border:1px solid #333; width:300px; height:100px;"></textarea>
<br /><br />
<a style="padding:4px; border:1px solid #333;" id="copy-dynamic">Copy</a><span id="msg" style="color:#090;"></span>

<script type="text/javascript">

$(document).ready(function(){

    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text(),
  afterCopy:function(){
            $('a#copy-description').text('Copied').fadeOut('slow');
        }
    });


    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('textarea#dynamic').val();},
        beforeCopy:function(){
            $('textarea#dynamic').css('background','green');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('textarea#dynamic').css('background','white');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }  
    });


});


</script>

id for the source element must call with the copy- instruction before initiate a clipboard handling with zClip

Live Demo

Download Script