吐槽做得很不錯的ZeroClipboard
阿新 • • 發佈:2019-02-06
ZeroClipboard用於將內容複製到剪貼簿中,瀏覽器相容做得非常好,幾乎所有都能用,但是這貨的Github上的案例居然不是最新版本的,而網上一搜,五花八門。各種方式載入呼叫,甚至都不知道哪些是被棄用了的。
HTML
而官網給出的demo中居然沒有示例程式碼。就一個功能讓你玩,要想知道怎麼回事,呵呵 ,自己翻原碼去。
這裡把1.3.5 版本的使用方法拿來共享 下
JS
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>