clipboard.js實作複製功能步奏詳解

這次帶給大家clipboard.js實作複製功能步奏詳解，clipboard.js實作複製功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

最近在工作上有一個需求，就是需要使用一個按鈕來實現對應內容的複製。在網路上找了很多解決方案，最後對比之下選擇了clipboard.js外掛程式來進行實作。因為它不依靠flash以及其他框架，而且體積小使用簡單相容性也好。下面簡單介紹一下它的用法。

引入插件，可以下載，也可以使用第三方cdn。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

對於HTML來說，我們有兩種用法。

第一種

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target=&#39;#copyValue&#39;>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

# 說明：如果我們使用按鈕複製的是另一個元素的內容，我們可以使用這種方法。此時將按鈕稱為觸發元素，被複製的元素稱為目標元素。此時data-clipboard-target的值為目標元素的選擇器，而data-clipboard-target的屬性被設定在觸發元素上。 new Clipboard()為實例化對象，參數可以是HTML元素，元素選擇器。有success和error兩個事件可以供我們監聽，實作自己的邏輯。因為複製完成後，目標元素會處於選取狀態，所以我們需要e.clearSelection()取消目標元素的選取狀態。
優點：複製的內容可以是動態的，目標元素的值會變化，複製的值也會改變。

適用場景：複製內容可變，不固定。

第二種

//html部分
<button type="button" data-clipboard-text=&#39;复制内容&#39;>复制</button>
//js部分
new Clipboard('button');

# 說明：data-clipboard-text的值為你要複製的內容。無目標元素，只有觸發元素。

缺點：複製的內容是靜態的，不變的，事先設定好的。

適用場景：複製內容固定不變

對於以上缺點，我們可以優化如下，使之複製的內容也是動態的。

//html部分
 <input type="text" id="copyValue" />
 <button type="button" id="copy">复制</button>
//js
$('#copy').on('click', function () {
 var value = $('#copyValue').val();
 $('#copy').attr('data-clipboard-text', value);
 var clipboard = new Clipboard('#copy');
 clipboard.on('success', function (e) {
  alert('复制成功');
 });
 clipboard.on('error', function (e) {
  alert('复制失败');
 });
})

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue2.0父子元件互相傳遞函數（附程式碼）

JS物件導向的使用詳解

#

以上是clipboard.js實作複製功能步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！