Copy content to the clipboard in JS: compatible with all browsers in IE, Firefox, Chrome, and Safari

Source: Internet
Author: User
Nowadays, there are more and more browser types, such as IE, Firefox, Chrome, Safari, etc. So it is not a small function to copy the content of a js file to the clipboard.

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.