Clipboard.js 無(wú)需Flash的JavaScript復(fù)制粘貼庫(kù)

更新時(shí)間：2023年07月08日 10:18:02 投稿：mdxy-dxy

這篇文章主要介紹了JavaScript 內(nèi)容復(fù)制(無(wú)需flash) Clipboard.js使用方法,需要的朋友可以參考下

clipboard.js基本使用

clipboard.js 是一個(gè)不需要flash，將文本復(fù)制到剪貼板的插件。簡(jiǎn)單介紹下基本運(yùn)用。

一、引入插件

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

二、基本使用

首先需要您需要通過(guò)傳遞DOM選擇器，HTML元素或HTML元素列表來(lái)實(shí)例化它。

new Clipboard('.btn');

用一個(gè)元素當(dāng)觸發(fā)器來(lái)復(fù)制另一個(gè)元素的文本,data-clipboard-target屬性后需要跟屬性選擇器

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="btn" data-clipboard-target="#foo">
</button>

另外還有另外一個(gè)屬性data-clipboard-action屬性，以指定是要要么copy還是要cut操作。默認(rèn)情況下是copy。cut操作只適用于或元素。

<textarea id="bar">Mussum ipsum cacilds...</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>

從屬性中復(fù)制文本，不需要另一個(gè)元素當(dāng)觸發(fā)器，可以使用data-clipboard-text屬性，在后面放上需要復(fù)制的文本.

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>

三、其他說(shuō)明

1、通過(guò)運(yùn)行檢查clipboard.js是否支持Clipboard.isSupported()，返回true則可以使用。
2、顯示一些用戶反饋或捕獲在復(fù)制/剪切操作后選擇的內(nèi)容。操作，文本，觸發(fā)元素

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
 console.info('Action:', e.action);
 console.info('Text:', e.text);
 console.info('Trigger:', e.trigger);

 e.clearSelection();
});

clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

該插件使用的是事件委托的方式來(lái)觸發(fā)，所以大大減少了對(duì)dom的操作。

四、高級(jí)使用

如果你不想修改你的HTML，又或者要獲取內(nèi)容的標(biāo)簽是無(wú)法被選中【移動(dòng)端經(jīng)常遇到的問(wèn)題】，那么你可以使用一個(gè)非常方便的命令A(yù)PI。所以你需要做的是聲明一個(gè)函數(shù)，寫下你想要的操作，并返回一個(gè)值。下面是一個(gè)對(duì)不同id的觸發(fā)器返回不同的值的例子。具體的使用方法請(qǐng)看https://clipboardjs.com

五、移動(dòng)端復(fù)制失敗分析詳解

移動(dòng)端復(fù)制失敗的原因基本都是要獲取的內(nèi)容無(wú)法被選中，如此才獲取不到內(nèi)容，用上面的函數(shù)基本可以解決，但亦可看看分析過(guò)程。

clipboard.js在移動(dòng)端復(fù)制失敗的解決方法

六、支持的瀏覽器

谷歌42+，火狐41+，其他自己查看官方

下面是實(shí)例

clipboard.js 實(shí)現(xiàn)了純 JavaScript （無(wú) Flash）的瀏覽器內(nèi)容復(fù)制到系統(tǒng)剪貼板的功能?？梢栽跒g覽器和 Node 環(huán)境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+

官方網(wǎng)站：https://github.com/zenorocha/clipboard.js

軟件下載：//www.dbjr.com.cn/jiaoben/385604.html

官方使用方法：https://zenorocha.github.io/clipboard.js/#example-text

示例代碼：

官方實(shí)例一：

在線演示：http://demo.jb51.net/js/2015/clipboard/

<script src="clipboard.min.js"></script>
 <textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">腳本之家是國(guó)內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁(yè)制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料。</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
 Cut to clipboard
</button>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
 console.info('Action:', e.action);
 console.info('Text:', e.text);
 console.info('Trigger:', e.trigger);
alert("復(fù)制成功");
 e.clearSelection();
});

clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});
</script>

官方實(shí)例二：

<script src="dist/clipboard.min.js"></script>
<button class="btn">
<script type="text/javascript">
var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
 console.info('Action:', e.action);
 console.info('Text:', e.text);
 console.info('Trigger:', e.trigger);

 e.clearSelection();
});

clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});
</script>

到此這篇關(guān)于Clipboard.js 無(wú)需Flash的JavaScript復(fù)制粘貼庫(kù)的文章就介紹到這了,更多相關(guān)JavaScript 內(nèi)容復(fù)制 Clipboard內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: