QQ登录
当前位置:首页 » 程序代码 » 正文

      以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它。ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器不支持flash,导致一些没法正常使用了。

      今天火端开始使用clipboard.js来复制网页文本内容了,clipboard.js不需要flash,也不依赖其它的js库,min版仅11KB,GZIP压缩后仅3KB,非常的小巧。

使用起来也非常的简单,代码如下:

<input id="foo" value="这里是内容">
<button class="btn" data-clipboard-target="#foo">点击复制</button>
<script src="dist/clipboard.min.js"></script>
<script>
new Clipboard('.btn');
<script>
如果要添加事件,可以这样

<input id="foo" value="这里是内容">
<button class="btn" data-clipboard-target="#foo">点击复制</button>
<script src="dist/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
   alert("复制成功!");
    e.clearSelection();
});

clipboard.on('error', function(e) {
     alert("复制失败!");
});
<script>

支持的浏览器如下:

还有更多例子以及下载请看官网:https://clipboardjs.com/

或者直接下载:https://github.com/zenorocha/clipboard.js/archive/master.zip

本文地址:https://www.huoduan.com/clipboardjs.html
本文作者:火端网络,转载请务必以超链接形式注明出处。
本文标签:JS,代码
 关键词: clipboard.js  ZeroClipboard  ZeroClipboard.js  
发表评论

昵称 (必填)

邮箱 (选填,可收到作者回复信息)

网址 (选填)

  • 顶一个
    顶一个 07月25日 回复

    老大做的东西都很精品。

  • 火端网络 07月25日 回复

    这个不是我做的~哈

  • 千寻搜索
    千寻搜索 07月23日 回复

    看起来不错,能兼容IE8就更好了

站内搜索