這次帶給大家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='#copyValue'>复制</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='复制内容'>复制</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中文網其它相關文章!
推薦閱讀:
#以上是clipboard.js實作複製功能步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!