简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

clipboard.js uses html pages to copy information to the clipboard

巴扎黑
Release： 2017-07-18 17:00:04
Original
2508 people have browsed it

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>
Copy after login

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>　
Copy after login

you may expect, the cut action only works on or