相容多瀏覽器js文本複製與剪下代碼

我們在網頁上放置一個複製按鈕，主要用來方便使用者複製連結之類的複雜文本，以往的做法是，通過JS依靠Flash，甚至藉助jQuery龐大的js庫來實現文本複製到剪貼簿的。今天我要給大家介紹的是一款極現代的，不需要flash，不依賴任何其他js庫的非常小的外掛程式，它叫clipboard.js。

HTML

首先載入本地clipboard.js檔案。

<script src="clipboard.min.js"></script>

然後就是在body中加上要複製或剪下的文本域內容以及按鈕。

<input id="foo" value="http://www.111cn.net">

<button class="btn" data-clipboard-target="#foo" aria-label="複製成功！">複製</button>

這裡，我們使用了HTML5的data-屬性，用來定位複製對象目標，它指向了文本域#foo，說明複製的是#foo中的value內容，aria-label屬性定義了複製成功後的資訊，用來提示複製結果資訊。

還有個屬性data-clipboard-action，它定義當前操作是複製還是剪下，預設是複製，當data-clipboard-action="cut"，這時，點擊按鈕將會剪下文本，跟WORD操作一樣。當然，剪下操作僅適用於text和textarea。
我們也可以不需要input和textarea等元素內容作為複製對象，我們可以將要複製的內容通過ata-clipboard-text屬性定義在按鈕上，點擊按鈕就可以複製到ata-clipboard-text對應的內容。

<button class="btn" data-clipboard-text="這裡是要複製的內容" aria-label="複製成功！">複製</button>
Javascript

將以下一句代碼加入到</body>前的<script>裡，儲存開啟瀏覽，點擊按鈕即可複製。

new Clipboard('.btn');

當然我們可以再進一步處理，比如當複製完成後，提示複製成功資訊更友好些，只要執行以下代碼即可：

var clipboard = new Clipboard('.btn');
 
clipboard.on('success', function(e) {
    var msg = e.trigger.getAttribute('aria-label');
    alert(msg);
 
    e.clearSelection();
});

注意文章用到了clipboard.min.js了，這個檔案我們可以百度搜尋去下載clipboard.min.js檔案了。