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

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

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

三、其他說明

1、通過運行檢查clipboard.js是否支持Clipboard.isSupported()，返回true則可以使用。
2、顯示一些用戶反饋或捕獲在復制/剪切操作后選擇的內容。操作，文本，觸發(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);
});

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

四、高級使用

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

五、移動端復制失敗分析詳解

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

clipboard.js在移動端復制失敗的解決方法

六、支持的瀏覽器

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

下面是實例

clipboard.js 實現(xiàn)了純 JavaScript （無 Flash）的瀏覽器內容復制到系統(tǒng)剪貼板的功能。可以在瀏覽器和 Node 環(huán)境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+

官方網站：https://github.com/zenorocha/clipboard.js

軟件下載：//chabaoo.cn/jiaoben/385604.html

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

示例代碼：

官方實例一：

在線演示：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">腳本之家是國內專業(yè)的網站建設資源、腳本編程學習類網站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網頁制作、網絡編程、網站建設等編程資料。</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("復制成功");
 e.clearSelection();
});

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

官方實例二：

<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>

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

您可能感興趣的文章: