clipboard.js 分析与研究 可用html页面复制信息到剪切板 博客分类： JavaScript JavaScript

下载路径：https://clipboardjs.com/

应用：

data-clipboard-target attribute 对应需要Copy的html. 可以携带页面的样式，如果保存word。 txt 则无。

样例如下：

<!-- 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 用于区别 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>