Copy to clipboard in FireFox 3.5 and IE8

With the advent of the 10th flash, FF3.5 and IE8, the magic button “Copy to clipboard” stopped working on many sites. I stopped working for security reasons (so that when you go to a website, you don’t have a left link or advertising text in the buffer, or the attackers didn’t use this feature for other purposes).

Now EkshonSkript allows you to copy to the clipboard only when the user acts, that is, when you click on the clip (and the clip can be made transparent;). This is what jhuckaby used when creating his Zero Clipboard script.

View demo:

• Simple debug test
• Multiple use
• HTML sors copy

The script works in all modern browsers.
Tested in FF3.5, IE8, IE8 (mod7), Chrome3, Opera10b2, Safari4. Support flash 9 and 10.

The bottom line:

After we use JS, initialize the script, specify the path to ZeroClipboard.swf and create the client for copying, we can safely buffer all the information to the clipboard by clicking.
')
But the script is not limited to this, it has wonderful properties (methods):

• sticking to the DOM element (Gluing) - that is to say, we specified the element's id, glue the flash drive over it (it copies to the buffer), which automatically adjusts to the size of the element;
• css effects - the script highlights the element on which the button is suspended, creating subclasses of "hover", "active" (ala pseudo). You can change them to your own in CSS;
• the ability to set your own presentation is in case you need to create a custom rectangle, and you don’t need to stick a flash drive anywhere;
• and he can also steer with standard events (onLoad, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onComplete).

About this and many other things , wonderfully described

Example

< html >
< body >
<!-- , ZeroClipboard.swf *.js -->
< script type ="text/javascript" src ="ZeroClipboard.js" ></ script >
<!-- -->
<div id= "d_clip_button" style= "border:1px solid black; padding:20px;" >Copy To Clipboard</div>

<script language= "JavaScript" >
//
var clip = new ZeroClipboard.Client();
//
clip.setText( 'Copy me!' );
//
clip.glue( 'd_clip_button' );
</ script >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

Full example

< html >
< head >
< style type ="text/css" >
#d_clip_button {
text-align:center;
border:1px solid black;
background-color:#ccc;
margin:10px; padding:10px;
}
/* -- */
#d_clip_button.hover { background-color:#eee; }
#d_clip_button.active { background-color:#aaa; }
</ style >
</ head >
< body >
< script type ="text/javascript" src ="ZeroClipboard.js" ></ script >

Copy to Clipboard: <input type= "text" id= "clip_text" size= "40" value= "Copy me!" /><br/><br/>

<div id= "d_clip_button" >Copy To Clipboard</div>

<script language= "JavaScript" >
var clip = new ZeroClipboard.Client();
clip.setMoviePath( 'ZeroClipboard.swf' ); //
clip.setText( '' ); // onouseDown
clip.setHandCursor( true ); //
clip.setCSSEffects( true ); // CSS

clip.addEventListener( 'load' , function (client) {
// alert( " " );
});

clip.addEventListener( 'complete' , function (client, text) {
alert( " : " + text );
});

clip.addEventListener( 'mouseOver' , function (client) {
// alert(" ");
});

clip.addEventListener( 'mouseOut' , function (client) {
// alert(" ");
});

clip.addEventListener( 'mouseDown' , function (client) {
// alert(" ");
// , 'clip_text'
clip.setText( document .getElementById( 'clip_text' ).value );
});

clip.addEventListener( 'mouseUp' , function (client) {
// alert(" ");
});
// 'd_clip_button'
clip.glue( 'd_clip_button' );
</ script >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

Once again links:

• ZeroClipboard Page
• Project Wiki
• Simple debug test
• Multiple use of ZeroClipboard
• HTML sors copy

Considered in detail by the user dohtar

Typed on bald keyboard