欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

不依賴Flash和任何JS庫實(shí)現(xiàn)文本復(fù)制與剪切附源碼下載

 更新時(shí)間：2015年10月09日 11:45:24   投稿：mrr  
本篇文章給大家分享的文本復(fù)制與剪切板功能，實(shí)現(xiàn)此功能不依賴falsh插件和任何js庫實(shí)現(xiàn)的，感興趣的朋友一起看看吧

效果圖如下：

我們?cè)诰W(wǎng)頁上放置一個(gè)復(fù)制按鈕，主要用來方便用戶復(fù)制鏈接之類的復(fù)雜文本，以往的做法是，通過JS依靠Flash，甚至借助jQuery龐大的js庫來實(shí)現(xiàn)文本復(fù)制到剪貼板的。今天我要給大家介紹的是一款極現(xiàn)代的，不需要flash，不依賴任何其他js庫的非常小的插件，它叫clipboard.js。

查看演示 下載源碼

HTML

首先加載本地clipboard.js文件。

復(fù)制代碼 代碼如下:

<script src="clipboard.min.js"></script>

然后就是在body中加上要復(fù)制或剪切的文本域內(nèi)容以及按鈕。

復(fù)制代碼 代碼如下:

<input id="foo" value="http://www.dbjr.com.cn/demo/clipboard/">
<button class="btn" data-clipboard-target="#foo" aria-label="復(fù)制成功！">復(fù)制</button>

這里，我們使用了HTML5的data-屬性，用來定位復(fù)制對(duì)象目標(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)擊按鈕將會(huì)剪切文本，跟WORD操作一樣。當(dāng)然，剪切操作僅適用于text和textarea。

我們也可以不需要input和textarea等元素內(nèi)容作為復(fù)制對(duì)象，我們可以將要復(fù)制的內(nèi)容通過ata-clipboard-text屬性定義在按鈕上，點(diǎn)擊按鈕就可以復(fù)制到ata-clipboard-text對(duì)應(yīng)的內(nèi)容。

復(fù)制代碼 代碼如下:

<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)文章

最新評(píng)論