clipboard.js uses html pages to copy information to the clipboard
Recently I am working on a smart customer service web browser application. One of the requirements is that after the customer obtains the
answer returned by the system, he clicks the "Copy Answer" button to copy the answer to the system clipboard. I thought this was a small case, but I found that it is not simple to have good compatibility with various mainstream browsers. The reason is that for security reasons, most modern browsers do not provide a universal clipboard copy interface (or if they do, it is disabled by default).
After searching online, there are roughly two existing solutions:
One: Use window.clipboardData in native javascript to implement the copy to clipboard function;
Two: Use the Zero Clipboard library;
After trying it, I found that the existing solutions cannot meet the needs.
Option 1 only supports IE browser, but does not work on Firefox and Chrome browsers.
Solution 2 is the solution adopted by most existing websites (including github, etc.). ZeroClipboard is a
JS plug-in for clipboard copying developed by foreign masters. It is Based on Flash to realize cross-browser copy function. When we use ZeroClipboard
, it will quietly hide a small Flash movie (swf) without affecting our user interface. We just need to use
to implement the copy function.
The "Zero" in ZeroClipboard refers to "invisible, zero interference".
Those who are interested in this can refer to http://my.oschina.net/shniu/blog/298406?p=1
But in modern browsers , flash is gradually declining, and the Firefox browser does not enable flash by default, so Zero Clipboard also performs poorly in terms of
compatibility.
So, is there a solution that is easy to implement and has good compatibility for the simple operation of copying to the clipboard? some! That is the open source project clipboard.js on github
(official website: http://zenorocha.github.io/clipboard.js/) The official website’s introduction to clipboard.js
is very simple:
A modern approach to copy text to clipboard No Flash. No dependencies. Just 3kb gzipped
Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure
or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.
That's why clipboard.js exists.(Copy text to clipboard It shouldn't be complicated, it shouldn't require many steps and hundreds of KB of files, plus
it shouldn't rely on flash and other frameworks, that's why clipboard exists)
Download path :
Application:
data-clipboard-target attribute corresponds to the html that needs to be copied. It can carry the style of the page, if it is saved in word. txt is none.
The sample is as follows:
<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>
data-clipboard-action attribute is used to distinguish copy or cut content.
<!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>
you may expect, the cut action only works on or