1.概述
clipboard是一个轻量级的input,div,textearae的复制内容的插件。
2.使用方式
2-1.引用js
<script src="/web2/component/clipboard/1.6.1/clipboard.js"> </script>
2-2.从target复印目标内容。
可以从input,textare,div中通过copy/cut获取内容目标内容，html 如下
(1).input
data-cliboard-target指向复印节点，指input的目标id
data-cliboard-action这里使用copy,同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用。
<input id="foo" type="text " value="hellow">
<button class="btn" data-cliboard-action="copy" data-cliboard-target="#foo">copy</button>
(2).textare和上面的主要区别只是input 和 textare不同
<textare id="bar">hello</textare>
<button class="btn" data-clipoard-action="cut" data-cliboard-target="#bar"></button>
(3).div和上面的主要区别是input和div的不同
<div>hello_div</div>
<button class="btn" data-clipboard-action="copy" data-cliboard-target="div">copy</button>
初始化js代码都是相同的：
<script>
var clipboard = new Clipboard(''.btn");
clipboard.on('success',function(e){
console.log(e);
});
</script>
(4).通过属性返回复印的内容
通过data-clipboard-text属性返回复印的内容。
单节点：通过id指定节点对象，并做为参数才传送给Clipboard。这里的返回值的内容是data-clipboard-text内容。
//通过id获取复制data-clipboard-text的内容。
<div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>
<script>
var btn=document.getElementById('btn');var cliboard=new Clipboard('btn');
clipboard.on('success',function(e){
console.log(e);
});
clipboard.on('error',function(e){
console.log(e);
});
</script>
(5).多节点
(5-1).通过button返回所有buetton按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的 data-clipboard-text的内容，分别是1，2，3。
//多节点获取button的data-clipboard-text值
<button data-clipboard-text="1"></button>
<button data-clipboard-text="2"></button>
<button data-clipboard-text="3"></button>
<script>
var btn=document.querySelectAll('button');
var clipboard=new Clipboard(btn);
clipboard.on('success',function(e){
console.log(e);
});
</script>
(5-2).通过class获取所有的button按钮，并做为参数传送给传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的 data-clipboard-text的内容，分别是0,1,2。
//通过class注册多个button，获取data-clipboard-text的值
<button class="btn" data-clipboard-text="0">Copy</button>
<button class="btn" data-clipboard-text="1">Copy</button>
<button class="btn" data-clipboard-text="2">Copy</button>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>