最近在工作中有一個需求，就是需要使用一個按鈕實現相應內容的復制。在網上找了很多解決方案，最后對比之下選擇了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('復制失敗'); });})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
