最近在工作中有一個(gè)需求，就是需要使用一個(gè)按鈕實(shí)現(xiàn)相應(yīng)內(nèi)容的復(fù)制。在網(wǎng)上找了很多解決方案，最后對比之下選擇了clipboard.js插件來進(jìn)行實(shí)現(xiàn)。因?yàn)樗灰揽縡lash以及其他框架，而且體積小使用簡單兼容性也好。下面簡單介紹一下它的用法。

引入插件，可以下載，也可以使用第三方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'>復(fù)制</button>//js部分var clipboard = new Clipboard('button');clipboard.on('success',function(e){ e.clearSelection(); alert('復(fù)制成功'); });clipboard.on('error',function(e){ e.clearSelection(); alert('復(fù)制失敗'); });

說明：如果我們使用按鈕復(fù)制的是另一個(gè)元素的內(nèi)容，則我們可以使用這種方法。此時(shí)將按鈕稱為觸發(fā)元素，被復(fù)制的元素稱為目標(biāo)元素。此時(shí)data-clipboard-target的值為目標(biāo)元素的選擇器，而data-clipboard-target的屬性被設(shè)置在觸發(fā)元素上。new Clipboard()為實(shí)例化對象，參數(shù)可以是HTML元素，元素選擇器。有success和error兩個(gè)事件可以供我們監(jiān)聽，實(shí)現(xiàn)自己的邏輯。因?yàn)閺?fù)制完成后，目標(biāo)元素會處于選中狀態(tài)，所以我們需要e.clearSelection()取消目標(biāo)元素的選中狀態(tài)。
優(yōu)點(diǎn)：復(fù)制的內(nèi)容可以是動態(tài)的，目標(biāo)元素的值發(fā)生變化，復(fù)制的值也發(fā)生變化。

適用場景：復(fù)制內(nèi)容可變，不固定。

第二種

//html部分<button type="button" data-clipboard-text='復(fù)制內(nèi)容'>復(fù)制</button>//js部分new Clipboard('button');

說明：data-clipboard-text的值為你要復(fù)制的內(nèi)容。無目標(biāo)元素，只有觸發(fā)元素。

缺點(diǎn)：復(fù)制的內(nèi)容是靜態(tài)的，不變的，提前設(shè)置好的。

適用場景：復(fù)制內(nèi)容固定不變

對于以上缺點(diǎn)，我們可以優(yōu)化如下，使之復(fù)制的內(nèi)容也是動態(tài)的。

//html部分 <input type="text" id="copyValue" /> <button type="button" id="copy">復(fù)制</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('復(fù)制成功'); }); clipboard.on('error', function (e) {  alert('復(fù)制失敗'); });})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。