纯JavaScript实现的复制剪切库–clipboard.js

clipboard.js 使用纯 JavaScript (无需 Flash)实现了复制浏览器内容到系统剪切板的功能,可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。

clipboard.js

复制文本到剪切板并不是件困难的事情,它不需要复杂的配置步骤或者多说KBs的加载,但大多数情况下,都需要依赖Flash或者其他臃肿的框架,这就是clipboard.js存在的意义。

复制元素

常见的用法是从另一个元素中复制内容,你可以通过给目标元素添加一个 data-clipboard-target 属性来指定剪贴板目标元素。


<!-- 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 属性来定义是“复制 copy ”还是“剪切 cut ”内容。如果忽略该属性,则默认值为 copy


<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
 
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

cut 动作只能用于 <input> 或者 <textarea> 元素。

从属性中复制

事实上,你甚至不需要任何其他元素就能实现复制功能。你只需在目标元素中包含一个 data-clipboard-text 属性即可。


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

更多更高级用法请访问官网

clipboard.js

查看官网

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/520.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:

上一篇:

下一篇:

顶部 评论 底部