1.概述
clipboard是一個輕量級的input,div,textearae的復制內(nèi)容的插件。
2.使用方式
2-1.引用js
<script src="/web2/component/clipboard/1.6.1/clipboard.js"> </script>
2-2.從target復印目標內(nèi)容。
可以從input,textare,div中通過copy/cut獲取內(nèi)容目標內(nèi)容，html 如下
(1).input
data-cliboard-target指向復印節(jié)點，指input的目標id
data-cliboard-action這里使用copy,同時也可以使用cut，則點擊按鈕后，內(nèi)容里的值被剪切。如果沒有指定，則默認值是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和上面的主要區(qū)別只是input 和 textare不同
<textare id="bar">hello</textare>
<button class="btn" data-clipoard-action="cut" data-cliboard-target="#bar"></button>
(3).div和上面的主要區(qū)別是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).通過屬性返回復印的內(nèi)容
通過data-clipboard-text屬性返回復印的內(nèi)容。
單節(jié)點：通過id指定節(jié)點對象，并做為參數(shù)才傳送給Clipboard。這里的返回值的內(nèi)容是data-clipboard-text內(nèi)容。
//通過id獲取復制data-clipboard-text的內(nèi)容。
<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).多節(jié)點
(5-1).通過button返回所有buetton按鈕，并做為參數(shù)傳送給Clipboard。每個按鈕被點擊時，返回值的內(nèi)容是其對應的 data-clipboard-text的內(nèi)容，分別是1，2，3。
//多節(jié)點獲取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按鈕，并做為參數(shù)傳送給傳送給Clipboard。每個按鈕被點擊時，返回值的內(nèi)容是其對應的 data-clipboard-text的內(nèi)容，分別是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>