clipboard.js無需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://www.dhdzp.com/article/73145.htm"> <button class="btn" data-clipboard-target="#foo" aria-label="復制成功！">復制</button>
這里，我們使用了HTML5的data-屬性，用來定位復制對象目標，它指向了文本域#foo，說明復制的是#foo中的value內(nèi)容，aria-label屬性定義了復制成功后的信息，用來提示復制結(jié)果信息。
還有個屬性data-clipboard-action，它定義當前操作是復制還是剪切，默認是復制，當data-clipboard-action="cut"，這時，點擊按鈕將會剪切文本，跟WORD操作一樣。當然，剪切操作僅適用于text和textarea。
我們也可以不需要input和textarea等元素內(nèi)容作為復制對象，我們可以將要復制的內(nèi)容通過ata-clipboard-text屬性定義在按鈕上，點擊按鈕就可以復制到ata-clipboard-text對應(yīng)的內(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();
});
以上就是，不需要flash，不依賴任何其他js庫實現(xiàn)文本復制與剪切實現(xiàn)過程，希望對大家的學習有所幫助。
相關(guān)文章
suggestion開發(fā)小結(jié)以及對鍵盤事件的總結(jié)（針對中文輸入法狀態(tài)）
suggestion開發(fā)小結(jié)以及對鍵盤事件的總結(jié)（針對中文輸入法狀態(tài)）,需要的朋友可以參考下。2011-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)ATM機存取款功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01![javascript最短的拖動代碼[兼容FF]](http://img.jbzj.com/images/xgimg/bcimg2.png)
javascript最短的拖動代碼[兼容FF]...2007-10-10
在前端開發(fā)中Webpack已經(jīng)成為構(gòu)建現(xiàn)代JavaScript應(yīng)用的必備工具,它負責模塊的打包和優(yōu)化,這篇文章主要介紹了前端webpack一些常用配置的作用,文中介紹的非常詳細,需要的朋友可以參考下2025-04-04
Javascript實現(xiàn)漢字和拼音互轉(zhuǎn)的終極方案
網(wǎng)上關(guān)于JS實現(xiàn)漢字和拼音互轉(zhuǎn)的文章很多，但是比較雜亂，有的不支持多音字、不支持聲調(diào)或者字典文件太大，無法根據(jù)實際需要滿足需求。這篇文章給大家修正整理網(wǎng)上的幾種常見方法，文章結(jié)尾還附簡單的JS拼音輸入法，本文對大家具有一定的參考借鑒價值，下面一起看看吧。2016-10-10
Javascript中暫停功能的實現(xiàn)代碼...2007-03-03
javascript jq 彈出提示效果實現(xiàn)的方法有很多，可能會在某些地方看到過，下面為大家演示個示例介紹下如何實現(xiàn)jq 彈出層，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了JS+CSS相對定位實現(xiàn)的下拉菜單,涉及JavaScript結(jié)合css的定位技術(shù)實現(xiàn)下拉菜單的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
在現(xiàn)代Web開發(fā)中,圖像處理是一個常見的需求,尤其是為圖片添加水印,下面我們就來看看如何使用HTML5的Canvas技術(shù)為圖片添加水印,需要的可以了解下2024-11-11
基于Two.js實現(xiàn)星球環(huán)繞動畫效果的示例
本篇文章主要介紹了基于Two.js實現(xiàn)=星球環(huán)繞動畫效果的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11