無需依賴任何JS庫實現文本復制與剪切是什么樣的

這篇文章給大家介紹無需依賴任何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.xuebuyuan.com/demo/clipboard/"> <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(); });

關于無需依賴任何JS庫實現文本復制與剪切是什么樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。