1. 程式人生 > >JS複製到剪下板(相容主流所有瀏覽器)

JS複製到剪下板(相容主流所有瀏覽器)

1、主要用到github上的一個開源的專案:clipboard.js
2、clipboard.js 可以實現純JS複製資料到剪下板中(無需flash支援)跟現在主流的zeroclipboard 比起來方便了不止一點兩點(畢竟不是所有人都會裝flash外掛的)
下面寫一些DEMO來記錄一下學習:

首先引入依賴JS包:

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

然後例項化clipboard(clipboard例項化需要指定一個元素,也就是點選指定元素會觸發複製方法)

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

下面是完整DEMO:

<script src="clipboard.min.js"></script>
 <textarea id="bar" cols="10" rows="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">clipboard.jsd的DEMO演示</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>