说到点击按钮“复制到剪贴板",大家都可能用过,但是之前的实现方不是只支持某些浏览器,就是要在网页内嵌swf(Flash)文件。 这两种方法:第一种不能很好的兼容多数浏览器,第二种方式下开发人员可能会担心Flash的安全性问题。 现在出现了一种新的实现方式:clipboard.js。只要给页面引入一个js文件,并且在页面上做一定处理,就可 实现全浏览器兼容的“一键复制到剪贴板”的功能。
目录
- 万能的一键复制到剪贴板支持IE火狐谷歌及移动版浏览器
-
clipboard.js
无需Flash,无需框架;
仅需3KB的压缩版JS ,就可实现华丽的剪贴板复制操作 —— [clipboardjs.com]clipboard.js是一个轻量级的“一键复制到粘贴板”工具,您只需要将其引入您的项目,并在对应位置调用即可。
下载clipboard.js
最直接的方式就是进入官方主页下载
或者直接点击https://github.com/zenorocha/clipboard.js/archive/master.zip。使用clipboard.js
clipboard.js现在可支持文本框text和文本域text area两种方式的粘贴板复制:
1. 使用文本框作为复制内容的来源
(1).在你的页面引入clipboard.js1
<script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script> <script type = "text/javascript"> //加载clipboadr.js //.btn 按class绑定功能按钮 var clipboard = new Clipboard('.btn'); //复制成功触发的事件 clipboard.on('success', function(e) { //自定义事件区域 console.log(e); }); //复制失败触发的事件 clipboard.on('error', function(e) { //自定义事件区域 console.log(e); }); <script/>
(2)在你的页面上加入如下代码:
<!-- 要复制的目标 --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- 按钮及驱动 --> <!--保证button clipboard-target 和 input id 一致--> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">复制到剪贴板</button>
-
(3)打开你的浏览器,享受胜利果实!
2.使用文本域作为复制内容的来源
(1).在你的页面引入clipboard.js2
<script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type = "text/javascript">
//加载clipboadr.js
//.btn 按class绑定功能按钮
var clipboard = new Clipboard('.btn');
//复制成功触发的事件
clipboard.on('success', function(e) {
//自定义事件区域
console.log(e);
});
//复制失败触发的事件
clipboard.on('error', function(e) {
//自定义事件区域
console.log(e);
});
<script/>
(2)在你的页面上加入如下代码:
<!-- 要复制的目标 -->
<textarea id="bar">hello, ClipBoard JS !</textarea>
<!-- 按钮及驱动 -->
<!--保证button clipboard-target 和 input id 一致-->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">复制到剪贴板</button>
(3)打开你的浏览器,享受胜利果实!
不止是复制,还有更多…
其实clipboard.js还可以进行剪切操作,而且它的可操作对象不止于上边介绍的两种,只不过官网上主推这两种方式。如需了解clipboard.js更多功能,请进https://github.com/zenorocha/clipboard.js/archive/master.zip 3下载源代码及DEMO查看详细用法。
浏览器支持
clipboard.js支持大多数浏览器,支持列表如下:
列表1 | 列表2 | 列表3 |
---|---|---|
Chorme 42+ | Microsoft Edge 12+ | FireFox 41+ |
IE 9+ | Opera 29+ | Safari 10+ |
以防万一
如果你觉得不确定你的浏览器环境是否能使用clipboard.js,官方也给出了对应的检测方法:
只需在<script></script>
中加入这个:
alert(Clipboard.isSupported());
如果弹出true,那么你就可以放心大胆地使用clipboard.js在你的项目中了。