不依賴Flash和任何JS庫實現(xiàn)文本復制與剪切附源碼下載
效果圖如下：
我們在網(wǎng)頁上放置一個復制按鈕，主要用來方便用戶復制鏈接之類的復雜文本，以往的做法是，通過JS依靠Flash，甚至借助jQuery龐大的js庫來實現(xiàn)文本復制到剪貼板的。今天我要給大家介紹的是一款極現(xiàn)代的，不需要flash，不依賴任何其他js庫的非常小的插件，它叫clipboard.js。
HTML
首先加載本地clipboard.js文件。
<script src="clipboard.min.js"></script>
然后就是在body中加上要復制或剪切的文本域內(nèi)容以及按鈕。
<input id="foo" value="http://m.fzitv.net/demo/clipboard/">
<button class="btn" data-clipboard-target="#foo" aria-label="復制成功！">復制</button>
這里，我們使用了HTML5的data-屬性，用來定位復制對象目標，它指向了文本域#foo，說明復制的是#foo中的value內(nèi)容，aria-label屬性定義了復制成功后的信息，用來提示復制結果信息。
還有個屬性data-clipboard-action，它定義當前操作是復制還是剪切，默認是復制，當data-clipboard-action="cut"，這時，點擊按鈕將會剪切文本，跟WORD操作一樣。當然，剪切操作僅適用于text和textarea。
我們也可以不需要input和textarea等元素內(nèi)容作為復制對象，我們可以將要復制的內(nèi)容通過ata-clipboard-text屬性定義在按鈕上，點擊按鈕就可以復制到ata-clipboard-text對應的內(nèi)容。
<button class="btn" data-clipboard-text="這里是要復制的內(nèi)容" aria-label="復制成功！">復制</button>
Javascript
將以下一句代碼加入到</body>前的<script>里，保存打開瀏覽，點擊按鈕即可復制。
new Clipboard('.btn');
當然我們可以再進一步處理，比如當復制完成后，提示復制成功信息更友好些，只要執(zhí)行以下代碼即可：
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
var msg = e.trigger.getAttribute('aria-label');
alert(msg);
e.clearSelection();
});
以上內(nèi)容就是小編跟大家分享的不依賴Flash和任何JS庫實現(xiàn)文本復制與剪切附源碼下載，希望大家喜歡。
相關文章
隨著web技術發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機制，通過事件對外通信，能夠極大提高開發(fā)效率。下面這篇文章主要給大家介紹了關于利用Javascript實現(xiàn)一套自定義事件機制的相關資料，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了Javascript圖片無縫滾動的相關內(nèi)容,感興趣的小伙伴們可以參考一下2015-12-12
JavaScript高級程序設計 閱讀筆記（十七） js事件
IE中是冒泡型事件，即從最特定的事件目標到最不特定的事件目標2012-08-08
這篇文章主要介紹了js實現(xiàn)表單項的全選、反選及刪除操作,結合實例形式分析了基于dedecms后臺使用js實現(xiàn)表單項的全選、反選及刪除相關操作技巧,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JS實現(xiàn)先顯示大圖后自動收起顯示小圖的廣告代碼,涉及javascript頁面元素屬性的操作及數(shù)學運算技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
手風琴效果的導航想必大家都有見到過吧，實現(xiàn)的方法也有很多，在本文為大家介紹下使用原生js簡單實現(xiàn)下，感興趣的朋友不要錯過2013-11-11
偶然將想到的一個如何判斷鼠標從哪個方向進入一個容器的問題,并且做了一系列的設想，代碼部分不是很多，我直接寫了個示例， 感興趣的朋友可以了解下，或許本文對你有所幫助2013-02-02
這篇文章主要為大家詳細介紹了用JavaScript實現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家介紹了通過babel操作AST精準插入配置代碼的全流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2022-02-02
iScroll 4 這個版本完全重寫了iScroll這個框架的原始代碼。這個項目的產(chǎn)生完全是因為移動版webkit瀏覽器（諸如iPhone，iPad，Android 這些系統(tǒng)上廣泛使用）。下面這篇文章主要介紹了利用iscroll4實現(xiàn)輪播圖效果的方法教程,需要的朋友可以參考下。2017-01-01