《用clipboard.js實現純JS復制文本,比ZeroClipboard.js好用》要點:
本文介紹了用clipboard.js實現純JS復制文本,比ZeroClipboard.js好用,希望對您有用。如果有疑問,可以聯系我們。
相關主題:JS、Jquery插件
以前很多人都是用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