Zeroclipboard single copy button and multiple copy button implementation method

  • 2020-03-30 03:21:36
  • OfStack

Zeroclipboard is a cross-browser library class that USES Flash for replication, so it can run as long as the browser has Flash, and is more flexible than IE's document.execcommand ("Copy").

Zeroclipboard download address: (link: #)

Zeroclipboard implements multi-browser copy to paste board (single copy button and multiple copy buttons) for a better user experience, many websites now simply click the copy button to copy the contents of the text box to the paste board;

For reasons of compatibility, basically all is by zeroclipboard. First of all to download zeroclipboard, expanded the zeroclipboard. Js and zeroclipboard SWF, ZeroClipboard10. SWF (" for flash10 ") on the project, through zeroclipboard. SetMoviePath ('/zeroclipboard. SWF) method to load a SWF.
Here is the compiled code (also found online)

(single copy button) :

HTML:


<input type="text" value="text" id="copy_txt"/><a href="javascirpt:;" id="copy_btn"> copy </a>
<script language="JavaScript">
    ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );  //SetMoviePath is not in the same directory as HTML
    ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
    var clip = new ZeroClipboard.Client();   //Create a new Zero Clipboard object
    clip.setText( '' ); // will be set later on mouseDown   // Clean clipboard 
    clip.setHandCursor( true );      //Sets the shape when the mouse moves over the copy box
    clip.setCSSEffects( true );          //To enable CSS
    clip.addEventListener( 'complete', function(client, text) {     //Listen for events after replication is complete
          alert("aa")      
          clip.hide();                                          //After a copy, hide() deactivates the copy button to prevent double counting
     } );
   clip.addEventListener( 'mouseDown', function(client) {
          clip.setText( document.getElementById('copy_txt').value );
    } );
    clip.glue( 'copy_btn' );
</script>

Multiple copy buttons:


<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn"> copy </a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn"> copy </a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn"> copy </a>
<script language="JavaScript">
$(".copyBtn").each(function(i){
        var id = $(this).attr('data');
        var clip=null;
        clip = new ZeroClipboard.Client();
        ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' );  //SetMoviePath is not in the same directory as HTML
        ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
        clip.setHandCursor( true );
        clip.setText( $("#copy_txt"+id).val() );
        clip.addEventListener('complete', function (client, text) {
          alert( " Congratulations! " );
        });
        clip.glue( 'copy_btn'+id);
  });
</script>


Related articles: