用clipboard.js實現純JS復制文本到剪切板

      以前很多人都是用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');//首先需要您需要通過傳遞DOM選擇器，HTML元素或HTML元素列表來實例化它。 <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

本文作者：火端網絡，轉載請務必以超鏈接形式注明出處。

clipboard.js基本使用：http://www.jianshu.com/p/3f8867de041e