Home > Developer > Web Develop
Recently in a Smart Customer Service Web browser application, one of the requirements is that customers get the system back
After the answer, click on the "Copy Answer" button to copy the answer to the system Clipboard. Thought it was a small case, but found that if
It's not easy to have good compatibility with all major browsers. The reason for this is that for security reasons, most modern browsing
The Generic Clipboard Replication interface (or, if available, is disabled by default).
Search the Internet for a while, there are roughly two existing schemes:
One: Using native JavaScript window.clipboarddata implementation to copy to clipboard function;
Two: use zero clipboard library;
After trying to find that the existing solutions can not meet the requirements, the scheme is only supported by IE browser, in the Firefox,chrome
does not work on the browser. Program Two is the majority of existing Web sites (including GitHub, etc.) adopted by the scheme, Zeroclipboard
is a foreign great God developed a JS plugin for clipboard replication, which is based on Flash to achieve cross-browser replication capabilities. When
When we use Zeroclipboard, it will quietly hide a small Flash movie (SWF), not on our user interface
affect the results. We just have to use it for replication.
The "Zero" in Zeroclipboard refers to "invisible, 0 interference".
Interested in this can refer to Http://my.oschina.net/shniu/blog/298406?p=1
However, in modern browsers, Flash gradually fade, Firefox browser default does not open flash, so zero clipboard in
The compatibility aspect is also underperforming.
So, is there a simple, well-compatible solution to the simple operation of copying to the clipboard? Some! That's GitHub.
On the Open source project Clipboard.js (official website: http://zenorocha.github.io/clipboard.js/) Official website for clipboard.js Introduction
Very simple:
A modern approach to copy text to clipboard No Flash. No dependencies. Just 3kb gzipped
Copying text to the Clipboard shouldn ' t is hard. It shouldn ' t require dozens of steps to configure
Or hundreds of KBs to load. But the most of all, it shouldn ' t depend in Flash or any bloated framework.
That's why Clipboard.js exists. (Copying text to the Clipboard should not be complex, it should not require many steps as well as hundreds of KB of files, another
Outside, it should not rely on flash and other frameworks, which is why clipboard exists)
The use of Clipboard is very simple, and the download from the official website ZIP format Compression package has a very useful demo, to give a simple example:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Target-div</title>6 </Head>7 <Body>8 <!--1. Define Some markup -9 <Div>Hello</Div>Ten <Buttonclass= "BTN"data-clipboard-action= "Copy"Data-clipboard-target= "Div">Copy</Button> One A <!--2. Include Library - - <Scriptsrc=".. /dist/clipboard.min.js "></Script> - the <!--3. Instantiate clipboard - - <Script> - varClipboard= NewClipboard ('. BTN'); - + Clipboard.on ('Success', function(e) { - Console.log (e); + }); A at Clipboard.on ('Error', function(e) { - Console.log (e); - }); - </Script> - </Body> - </HTML>
Very simple, we only need the following four steps:
1. Introduction of Clipboard.min.js Files
2. Select a selector that can determine the element being copied, in this case the basic tag Selector <div> is used, and of course the ID selector class selector can be used, and so on
3. Define a button and note the properties of the button:
data-clipboard-action= "copy" data-clipboard-target= "div"
Where the Data-clipboard-target property is a selector that you don't define.
4. Write JS, set up Clipboard object and execute the method after copying
OK, so the function is finished, click on the button will find that the div content has been copied to the Clipboard.
This page is copyrighted by the author and the blog Park, reproduced please indicate the source.
Copy page content to the clipboard using Clipboard.js
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
