clipboard.js analysis and research can copy information to clipboard from html pages

Download path: https://clipboardjs.com/Application

:

data-clipboard-target attribute corresponds to the html that needs to be copied. It can carry the style of the page, if you save the word. txt has none.

An example 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>

The 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 <input> or <textarea> elements.

data-clipboard-text attribute 用于纯文本copy.

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>