引入腳本
https://clipboardjs.com/dist/clipboard.min.js
使用
-
判斷瀏覽器兼容性
瀏覽器兼容明細(xì)
if(typeof ClipboardJS != 'undefined' && ClipboardJS.isSupported()){
//初始化
}else{
console.log('瀏覽器不支持copt/cut或南，(⊙︿⊙)');
}
- 給按鈕添加[ 復(fù)制 ]事件
//--html
<input id="inputarea" value="一段文字" />
<a class="btn" data-clipboard-target="#inputarea" href="javascript:void(0);">復(fù)制</a>
//--js
new ClipboardJS('.btn');
- 給按鈕添加[ 剪切 ]事件
<a class="btn" data-clipboard-target="#inputarea" data-clipboard-action="cut" href="javascript:void(0);">剪切</a>
- 復(fù)制一段特定文字
<button class="btn" data-clipboard-text="一段指定的復(fù)制文字">Copy to clipboard</button>
- 從屬性上取一個(gè)復(fù)制文字
<button class="btn2" copystr="一段指定的復(fù)制文字2">Copy to clipboard2</button>
//--js
new ClipboardJS('.btn2', {
text: function(trigger) {
return trigger.getAttribute('copystr');
}
});
事件處理函數(shù)相關(guān)
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);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
