吐槽做得很不错的ZeroClipboard

最新推荐文章于 2021-08-04 16:29:04 发布

撸大树

最新推荐文章于 2021-08-04 16:29:04 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 其它文章标签： ZeroClipboard JS复制

本文链接：https://blog.youkuaiyun.com/doffs/article/details/24463455

版权

其它同时被 2 个专栏收录

4 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

ZeroClipboard用于将内容复制到剪贴板中，浏览器兼容做得非常好，几乎所有都能用，但是这货的Github上的案例居然不是最新版本的，而网上一搜，五花八门。各种方式加载调用，甚至都不知道哪些是被弃用了的。

而官网给出的demo中居然没有示例代码。就一个功能让你玩，要想知道怎么回事，呵呵，自己翻原码去。

这里把1.3.5 版本的使用方法拿来共享下

   ZeroClipboard.config({
                    moviePath: '/Scripts/zeroclipboard-1.3.5/ZeroClipboard.swf',
                    swfPath: '/Scripts/zeroclipboard-1.3.5/ZeroClipboard.swf'
                });

                var client = new ZeroClipboard($("#copyURL"));
                client.on("load", function (readyEvent) {
                    client.on("complete", function (client, args) {
                      var t = $(target);
                    var $copysuc = $("<font style='line-height: 1.8em;color:green;'><i class='fa fa-check'></i>已复制</font>");
                    t.hide(function () { t.after($copysuc) });
                    setTimeout(function () {
                        $($copysuc).fadeOut("fast", function () { $($copysuc).remove();t.show();  })
                    }, 800);
                    });
                });

HTML

  <div class="pure-u-7-8">
                        <input id="URL" type="text" readonly class="pure-input-1" placeholder="url" value="复制的内容">
                    </div>
                    <div class=" pure-u-1-8  ">  <button title="复制到剪贴板" data-clipboard-target="URL" class="pure-button copy" id="copyURL"><i class="fa fa-files-o fa-1"></i></button></div>