Copy JAVASCRIPT to clipboard

Source: my blog recently promised Mr. Zhang to write a short address service for 42qu. Some new things were learned during the writing process. JS clipboard operations are one of them. Javascript itself certainly provides an interface to operate the clipboard, which generally looks like functioncopyToClipboard (text) {if (win... SyntaxHighlighte

Source: my blog

Recently, I promised Mr. Zhang to write a short address service for 42qu. Some new things were learned during the writing process. JS operations on the clipboard is one of them.

Javascript itself certainly provides an interface for operating the clipboard, which generally looks like
 
Function copyToClipboard (text)
{
If (window. clipboardData) // IE
{
Window. clipboardData. setData ("Text", text );
}
Else
{
UnsafeWindow. netscape. security. PrivilegeManager. enablePrivilege ("UniversalXPConnect ");
Const clipboardHelper = Components. classes ["@ mozilla.org/widget/clipboardhelper1_1"]. getService (Components. interfaces. nsIClipboardHelper );
ClipboardHelper. copyString (text );
}
}

However, because of the differences in the perception of security, these existing interfaces need courage-the courage to break the jar.

So I browsed the discussion on StackOverFlow, and the flash hack seems to be the perfect solution, so I started the zeroClipboard adventure. I used ajax to submit the form on the page and used the jQuery library, which caused a number of problems. For this reason, I searched again and found the later solution-zClip.

ZClip combines zeroClipboard and jQuery to meet my needs. Due to its concise interface design, zClip should also meet the needs of most people. Of course, I have to mention that its flash dependency causes its congenital defects. Please be careful when using it.

Next I will post the instructions on its official website ):
 
1. Add jQuery and zClip to the page:
 
<Script type = "text/javascript" src = "js/jquery. js">
<Script type = "text/javascript" src = "js/jquery. zclip. js">
2. Bind zClip to the button you used to copy (or other elements ):
$ (Document). ready (function (){

$ ('A # copy-description'). zclip ({
Path: 'js/ZeroClipboard.swf ',
Copy: $ ('P # description'). text ()
});

// The link with ID "copy-description" will copy
// The text of the paragraph with ID "description"


$ ('A # copy-dynamic '). zclip ({
Path: 'js/ZeroClipboard.swf ',
Copy: function () {return $ ('input # dynamic '). val ();}
});

// The link with ID "copy-dynamic" will copy the current value
// Of a dynamically changing input with the ID "dynamic"

});
3. After the replication is completed by default, alert is displayed. You can configure the beforeCopy and afterCopy callback functions to customize them:
$ (Document). ready (function (){

$ ("A # copy-callbacks"). zclip ({
Path: 'js/ZeroClipboard.swf ',
Copy: $ ('# callback-paragraph'). text (),
BeforeCopy: function (){
$ ('# Callback-paragraph' ).css ('background', 'yellow ');
$ (This example .css ('color', 'Orange ');
},
AfterCopy: function (){
$ ('# Callback-paragraph' background .css ('background', 'green ');
$ (This example .css ('color', 'purple ');
$ (This). next ('. check'). show ();
}
});

});

4. Customizable parameters:

Note:

1. IE 6, IE 7, IE 8, FF 3.6, Chrome 8, Safari 5, and Opera 11 passed the test.

2. For the official CSS effect:
    
   /* ZClip is a flash overlay, so it must provide */
   /* The target element with "hover" and "active" classes */
   /* To simulate native: hover and: active states .*/
   /* Be sure to write your CSS as follows for best results :*/
   
   A: hover, a. hover {...}
   A: active, a. active {...}
   Display, hide, and remove zClip:
    
   $ ('A. copy'). zclip ('show'); // enable zClip on the selected element
   
   $ ('A. copy'). zclip ('hide '); // hide zClip on the selected element
   
   $ ('A. copy'). zclip ('delete'); // remove zClip from the selected element
   To achieve the best effect, bind zClip to your element when the page layout is fixed. Although a function is used to automatically adjust zClip, it cannot be guaranteed that it will not cause errors.
    

For other solutions:

1. All solution collections: http://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/