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

下载路径: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>

  

 

posted @ 2017-07-17 14:58  雪来了  阅读(899)  评论(0编辑  收藏  举报