clipboard.js 是一個不需要flash眶诈，將文本復制到剪貼板的插件聂宾。簡單介紹下基本運用晴及。
1 引入插件
<pre>
<script src="js/clipboard.min.js"></script>
</pre>
2基本使用
首先需要您需要通過傳遞DOM選擇器，HTML元素或HTML元素列表來實例化它烙荷。
<pre>
new Clipboard('.btn');
</pre>
1用一個元素當觸發(fā)器來復制另一個元素的文本,data-clipboard-target屬性后需要跟屬性選擇器
<pre>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="btn" data-clipboard-target="#foo">
</button>
</pre>
另外還有另外一個屬性data-clipboard-action屬性镜会，以指定是要要么copy還是要cut操作。默認情況下是copy奢讨。cut操作只適用于<input>或<textarea>元素稚叹。
<pre>
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
</pre>
2從屬性中復制文本，不需要另一個元素當觸發(fā)器拿诸，可以使用data-clipboard-text屬性，在后面放上需要復制的文本.
<pre>
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
</pre>
3其他說明
1通過運行檢查clipboard.js是否支持Clipboard.isSupported()塞茅，返回true則可以使用亩码。
2顯示一些用戶反饋或捕獲在復制/剪切操作后選擇的內(nèi)容。操作野瘦，文本描沟，觸發(fā)元素
<pre>
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);
});
</pre>
3該插件使用的是事件委托的方式來觸發(fā)飒泻，所以大大減少了對dom的操作。
4高級使用
如果你不想修改你的HTML吏廉，那么你可以使用一個非常方便的命令API泞遗。所有你需要做的是聲明一個函數(shù)，寫下你想要的操作席覆，并返回一個值史辙。下面是一個對不同id的觸發(fā)器返回不同的值的例子。具體的使用方法請看https://clipboardjs.com
<pre>
<body>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button id='foo_1' class="btn" data-clipboard-target="#foo">
</button>
</body>
<script>
new Clipboard('.btn', {
text: function(trigger) {
if(trigger.getAttribute('id')=='foo_1'){
return 1;
}else{
return 2;
}
}
});
</script>
</pre>
5支持的瀏覽器
谷歌42+佩伤，火狐41+聊倔，其他自己查看https://clipboardjs.com
