clipboard.js無需Flash無需依賴任何JS庫實作文字複製與剪切_javascript技巧

我們在網頁上放置一個複製按鈕，主要用來方便用戶複製鏈接之類的複雜文本，以往的做法是，通過JS依靠Flash，甚至借助jQuery龐大的js庫來實現文本複製到剪貼板的。今天要跟大家介紹的是一款極現代的，不需要flash，不依賴任何其他js庫的非常小的插件，它叫做clipboard.js。

運作效果圖：

 

HTML
首先載入本機clipboard.js檔案。

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

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

<input id="foo" value="http://www.jb51.net/article/73145.htm"> 
<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
將以下一句程式碼加入