不依賴Flash和任何JS庫實現(xiàn)文本復(fù)制與剪切附源碼下載
效果圖如下:
我們在網(wǎng)頁上放置一個復(fù)制按鈕,主要用來方便用戶復(fù)制鏈接之類的復(fù)雜文本,以往的做法是,通過JS依靠Flash,甚至借助jQuery龐大的js庫來實現(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://chabaoo.cn/demo/clipboard/">
<button class="btn" data-clipboard-target="#foo" aria-label="復(fù)制成功!">復(fù)制</button>
這里,我們使用了HTML5的data-屬性,用來定位復(fù)制對象目標,它指向了文本域#foo,說明復(fù)制的是#foo中的value內(nèi)容,aria-label屬性定義了復(fù)制成功后的信息,用來提示復(fù)制結(jié)果信息。
還有個屬性data-clipboard-action,它定義當(dāng)前操作是復(fù)制還是剪切,默認是復(fù)制,當(dāng)data-clipboard-action="cut",這時,點擊按鈕將會剪切文本,跟WORD操作一樣。當(dāng)然,剪切操作僅適用于text和textarea。
我們也可以不需要input和textarea等元素內(nèi)容作為復(fù)制對象,我們可以將要復(fù)制的內(nèi)容通過ata-clipboard-text屬性定義在按鈕上,點擊按鈕就可以復(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>里,保存打開瀏覽,點擊按鈕即可復(fù)制。
new Clipboard('.btn');
當(dāng)然我們可以再進一步處理,比如當(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庫實現(xiàn)文本復(fù)制與剪切附源碼下載,希望大家喜歡。
相關(guān)文章
js Select下拉列表框進行多選、移除、交換內(nèi)容的具體實現(xiàn)方法
我們經(jīng)常會看到很多的網(wǎng)站會看到有下拉列表的內(nèi)容進行直接增加與移除,下面我來介紹一款js Select下拉列表框進行多選、移除、交換內(nèi)容實例2013-08-08JS實現(xiàn)的新浪微博大廳文字內(nèi)容滾動效果代碼
這篇文章主要介紹了JS實現(xiàn)的新浪微博大廳文字內(nèi)容滾動效果代碼,可實現(xiàn)頁面圖文元素定時滾動的效果,涉及JavaScript時間函數(shù)定時改變頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-11-11JavaScript實現(xiàn)簡易tab欄切換內(nèi)容欄
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易tab欄切換內(nèi)容欄,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05