Zeroclipboard Implementation method of single copy button and multiple copy buttons

zeroclipboard is a cross-browser library class that uses Flash for copying, so it can run as long as the browser is equipped with Flash, and it is more flexible than IE's document.execCommand("Copy").

Zeroclipboard download address: //www.VeVB.COM/jiaoben/24961.html

Zeroclipboard implements the function of copying to pasteboard by multiple browsers (single copy buttons and multiple copy buttons) In order to better user experience, many websites now only need to click the copy button to copy the content to pasteboard;

For compatibility reasons, it is basically achieved through zeroclipboard. First, you need to download zeroclipboard. After decompression, put ZeroClipboard.js, ZeroClipboard.swf, ZeroClipboard10.swf ("for flash10") into the project. Swf can be loaded through ZeroClipboard.setMoviePath('/ZeroClipboard.swf' ) method;

Below is the code sorted out (also sorted out through online search)

(Single Copy Button):

html:

The code copy is as follows:

<input type="text" value="text" id="copy_txt"/><a href="javascirc:;" id="copy_btn">Copy</a>

<script language="JavaScript">

ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //SetMoviePath must be set if it 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 //Clear the clipboard

clip.setHandCursor( true ); //Set the shape when the mouse moves to the copy box

clip.setCSSEffects( true ); //Enable css

clip.addEventListener( 'complete', function(client, text) { // Listen event after copying is completed

alert("aa")

clip.hide(); // After copying once, hide() invalidates the copy button, preventing repeated calculations of the number of uses

} );

clip.addEventListener( 'mouseDown', function(client) {

clip.setText( document.getElementById('copy_txt').value );

} );

clip.glue( 'copy_btn' );

</script>

Multiple copy buttons:

The code copy is as follows:

<input type="text" value="text" id="copy_txt0"/><a href="javascirct:;" id="copy_btn0" data='0'>Copy</a>

<input type="text" value="text" id="copy_txt1"/><a href="javascirct:;" id="copy_btn1" data='1'>Copy</a>

<input type="text" value="text" id="copy_txt2"/><a href="javascirct:;" id="copy_btn2" data='2'>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 must be set if it 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 on the successful copying");

});

clip.glue( 'copy_btn'+id);

});

</script>

Note: clip.setText( $("#copy_txt"+id).val() ); If you are to get the content in the div, you usually use clip.setText( $("#copy_txt"+id).text() ); or clip.setText( $("#copy_txt"+id).html() );