clipboard.js是現代化的「複製到剪切板」插件。不包含 Flash。gzip 壓縮後僅 3kb。不依賴 Flash 或其餘臃腫的框架。API:https://clipboardjs.com
clipboard.js引用javascript
<script src="dist/clipboard.min.js"></script>
你須要經過傳入一個DOM 選擇器, HTML 元素, 或者 HTML 元素數組做爲參數,來實例化對象。html
new ClipboardJS('.btn');//複製按鈕的class或者id或者...
data-clipboard-action這個屬性有兩個值:data-clipboard-action="cut"(剪切)和data-clipboard-action="copy"(複製),默認是複製
使用demo:java
js部分:
var clipboard = new ClipboardJS('.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);
alert('複製失敗!');
});
複製
htnl部分:
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" readonly /> //用disabled的話,就不能複製了,由於disabled禁止選中
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">複製</button>
剪切
htnl部分:
<!-- Target -->
<input id="foo1" value="https://github.com/zenorocha/clipboard.js.git" readonly /> //用disabled的話,就不能剪切了,由於disabled禁止選中
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo1">剪切</button>