Home > Developer > JavaScript
Nowadays, there are more and more types of browsers, such as IE, Firefox, Chrome, and Safari. Therefore, it is not so easy to implement the small function of copying content from JavaScript to the clipboard.
In the flash 9 era, there was a scheme to copy content to the clipboard by killing all browsers in js:
This solution is one of the most popular methods: the famous Clipboard copysolution uses a clipboard.swf as a bridge to copy the content to the Clipboard.
The original principle is: Create a hidden flash file and assign "clipboard = .." to the flash variable FlashVars. With this assignment, flash will place the reset content to the clipboard. This method is compatible with IE, Firefox, Opera, chrome, and Safari. It is a "omnipotent" solution. The browser Flash Installation rate is very high, which is almost a perfect solution.
JS section:
Var clipboardswfdata;
Var setcopy_gettext = function (){
Clipboardswfdata = document. getElementById ('test _ text'). value;
// Alert (clipboardswfdata );
Parameter parameter Doc ument. clipboardswf. SetVariable ('str', clipboardswfdata );
}
Var floatwin = function (){
Alert ('copied successfully! ');
// Document. getElementById ('clipinner '). style. display = 'none ';
}
</Script>
HTML section:
Text Content
<Div id = "clipboard_content">
</Div>
But in the Flash 10 era, the above method is no longer working.
Flash 10 specifies that only the real operations (such as mouse clicking) on the swf can access the clipboard. The above method only uses a hidden swf file, using javascript to operate the flash clipboard, the user does not perform real operations on the swf file, so this method will become invalid.
So how can we solve this "Real Operation" problem? You can use a JavaScript Library: Zero Clipboard. Using this js library, you can copy data to the Clipboard Using flash 10. The principle of this method is to overwrite a dom element such as a button or div in a transparent flash (invisible to users). When you click this dom, the actual click is flash, to access the flash clipboard.
<Head>
<Title> Zero Clipboard Test
<Script type = "text/javascript" src = "ZeroClipboard. js"> script
<Script language = "JavaScript">
Var clip = null;
Function $ (id) {return document. getElementById (id );}
Function init (){
Clip = new ZeroClipboard. Client ();
Clip. setHandCursor (true );
Clip. addEventListener ('mouseover', function (client ){
// Update the text on mouse over
Clip. setText ($ ('fe _ text'). value );
});
Clip. addEventListener ('complete', function (client, text ){
// Debugstr ("Copied text to clipboard:" + text );
Alert ("this address has been copied. You can press Ctrl + V to paste it. ");
});
Clip. glue ('clip _ click', 'clip _ iner ');
}
</Script>
</Head>
<Body onLoad = "init ()">
<Input id = "fe_text" cols = 50 rows = 5 value = copy content text 1>
<Span id = "clip_container">Copy
</Body>
</Html>
During debugging, upload the file to the website. If you directly open flash locally, an error occurs and you do not have the permission. In the zeroclipboard.js file, moviepath is the falshaddress. The address location where the zeroclipboard.swf file is stored in the directory.
This js-based method for copying content to the clipboard supports all browsers: Firefox/IE/opera/chorme/safari!
It never works during local testing. It turns out to be a permission issue.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
