clipboard.js是现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。不依赖 Flash 或其他臃肿的框架。API:https://clipboardjs.com
 clipboard.js引用:

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

 你需要通过传入一个DOM 选择器HTML 元素, 或者 HTML 元素数组作为参数,来实例化对象。

new ClipboardJS('.btn');//复制按钮的class或者id或者...

 data-clipboard-action这个属性有两个值:data-clipboard-action="cut"(剪切)和data-clipboard-action="copy"(复制),默认是复制
 使用demo:

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('复制失败!');
}); 
复制
html部分:
<!-- Target --> 
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" readonly /> //用disabled的话,就不能复制了,因为disabled禁止选中
<!-- Trigger --> 
<button class="btn" data-clipboard-target="#foo">复制</button>
剪切
html部分:
<!-- 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>

 

posted on 2019-02-14 17:23  多年小白  阅读(196)  评论(0编辑  收藏  举报