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