Copy Text to Clipboard Jquery JavaScript

Monday, September 19, 2011

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

Download This Script     Live Demo     Download Script

2 comments:

Rajesh Jeedimalla said...

Hello

This example is not working for me , may i know reason , this is very urgent to me

Vapes said...

Great Post
thanks
For more posts on technology visit Technology blog

Post a Comment