ZeroClipboard Copy Text For Any Browser

(Translate by : Kingsley)

https://github.com/jonrohan/ZeroClipboard

Overview

    The ZeroClipboard JavaScript library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie. It can be appropriate for any browsers.

Purpose

    zClip is a lightweight jQuery "copy to clipboard" plugin built using the popular Zero Clipboard library. This plugin uses an invisible Adobe Flash movie that is fully compatible with Flash Player 10 and below.Howerer,when Adobe Flash Upgrade to Flash Player 11 ,Zclip not work any more,because Flash 11 coulde not be get hidden swf from javascript,

Attention

    Below in Adobe Flash Player 10 it works well, Above Adobe Flash Player 11,can not be used alert() function.

Setup

    To use the library, simply include the following JavaScript file in your page:

     <script type="text/javascript" src="ZeroClipboard.js"></script>

     You also need to have the "ZeroClipboard.swf" file available to the browser. If this file is located in the same directory as your web page, then it will work out of the box. However, if the SWF file is hosted elsewhere, you need to set the URL like this (place this codeafter the script tag):

     ZeroClipboard.setDefaults( { moviePath: 'http://YOURSERVER/path/ZeroClipboard.swf' } );

Clients

    Now you are ready to create one or more Clients. A client is a single instance of the clipboard library on the page, linked to one or more DOM elements. Here is how to create a client instance:

    var clip = new ZeroClipboard();

   You can also include an element or array of elements in the new client. * This example uses jQuery to find the button.

   var clip = new ZeroClipboard($("#my-button"));

   Next, you can set some options.

Setting Options

   There are default options you can set before, or when you create a new client.

   var _defaults = {

      moviePath:         "ZeroClipboard.swf",            // URL to movie

      trustedDomains:    undefined,                     // Domains that we should trust (single string or array of strings)

      hoverClass:        "zeroclipboard-is-hover",      // The class used to hover over the object

      activeClass:       "zeroclipboard-is-active",     // The class used to set object active

      allowScriptAccess: "sameDomain",              // SWF outbound scripting policy

      useNoCache:        true                               // Include a nocache query parameter on requests for the SWF

    };

    You can override the defaults using ZeroClipboard.setDefaults({ moviePath: "new/path" }) before you create any clients.

    You can also set the options when creating a new client by passing an optional json objectnew ZeroClipboard($("#d_clip_button"), { moviePath: "new/path", text: "Copy me!" })

Event Handlers

load

    The load event is fired when the Flash movie completes loading and is ready for action. Please note that you don't need to listen for this event to set options -- those are automatically passed to the movie if you call them before it loads. Example use:

clip.on( 'load', function ( client, args ) {

  alert( "movie has loaded" );

});

mouseover

    The mouseover event is fired when the user's mouse pointer enters the Flash movie. You can use this to simulate a rollover effect on your DOM element, however see CSS Effects for an easier way to do this. Example use:

clip.on( 'mouseover', function ( client, args ) {

  alert( "mouse is over movie" );

});

mouseout

    The mouseout event is fired when the user's mouse pointer leaves the Flash movie. You can use this to simulate a rollover effect on your DOM element, however see CSS Effects for an easier way to do this. Example use:

clip.on( 'mouseout', function ( client, args ) {

  alert( "mouse has left movie" );

} );

mousedown

    The mousedown event is fired when the user clicks on the Flash movie. Please note that this does not guarantee that the user will release the mouse button while still over the movie (i.e. resulting in a click). You can use this to simulate a click effect on your DOM element, however see CSS Effects for an easier way to do this. Example use:

clip.on( 'mousedown', function ( client, args ) {

  alert( "mouse button is down" );

} );

mouseup

    The mouseup event is fired when the user releases the mouse button (having first pressed the mouse button while hovering over the movie). Please note that this does not guarantee that the mouse cursor is still over the movie (i.e. resulting in a click). You can use this to simulate a click effect on your DOM element, however see CSS Effects for an easier way to do this. Example use:

clip.on( 'mouseup', function ( client, args ) {

  alert( "mouse button is up" );

} );

complete

    The complete event is fired when the text is successfully copied to the clipboard. Example use:

clip.on( 'complete', function ( client, args ) {

  alert("Copied text to clipboard: " + args.text );

} );

noflash

    The noflash event is fired when the user doesn't have flash installed on their system

clip.on( 'noflash', function ( client, args ) {

  alert("You don't support flash");

} );

wrongflash

    The wrongflash event is fired when the user has the wrong version of flash. ZeroClipboard supports version 10 and up.

clip.on( 'wrongflash', function ( client, args ) {

  alert("Your flash is too old " + args.flashVersion);

} );

dataRequested

    On mousedown, the flash object will check and see if the clipText has been set. If it hasn't, then it will fire off a dataRequestedevent. If the html object has data-clipboard-text or data-clipboard-target then ZeroClipboard will take care of getting the data. However if it hasn't been set, then it will be up to you to clip.setText from that method. Which will complete the loop.

clip.on( 'dataRequested', function ( client, args ) {

  clip.setText( 'Copied to clipboard.' );

} );

Examples

    The following are complete, working examples of using the clipboard client library in HTML pages.

Complete Example

Here is a complete example which exercises every option and event handler:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

         <title>MyHtml.html</title>

         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

         <meta http-equiv="description" content="this is my page">

         <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>

<script src="../js/ZeroClipboard.js"></script>

<script type="text/javascript">

         $(document).ready(function() {

         var clip = new ZeroClipboard($("#d_clip_button"), {

                 moviePath: "../js/swf/ZeroClipboard.swf"

         });

         clip.on('load', function (client) {

            debugstr("Flash movie loaded and ready.");

         });

         clip.on('noflash', function (client) {

         debugstr("Your browser has no flash.");

         });

         clip.on('complete', function (client, args) {

                 debugstr("Copied text to clipboard: " + args.text );

         });

         clip.on( 'mouseover', function(client) {});

         clip.on( 'mouseout', function(client) {});

         clip.on( 'mousedown', function(client) {

                 clip.setText($("#fe_text").val());

         });

         clip.on( 'mouseup', function(client) {});

         function debugstr(text) {

                 $("#d_debug").append($("<p>").text(text));

         }

         });

</script>

<div class="demo-area">

         <button id="d_clip_button" class="my_clip_button"

                 title="Click me to copy to clipboard.">

         b>Copy To Clipboard...</b></button>

         <textarea id="fe_text" cols="50" rows="3"></textarea>

         <textarea id="testarea" cols="50" rows="3"></textarea>

         </div>

         <h4>Debug Console: </h4>

         <div id="d_debug"></div>

</body>

</html>