（1）介紹：

clipboard.js是一款輕量級(jí)的實(shí)現(xiàn)復(fù)制文本到剪貼板功能的JavaScript插件。通過該插件可以將輸入框，文本域，DIV元素中的文本等文本內(nèi)容復(fù)制到剪貼板中clipboard.js支持主流的瀏覽器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

（2）clipboard復(fù)印內(nèi)容的方式有 從target復(fù)印目標(biāo)內(nèi)容 通過function 要復(fù)印的內(nèi)容 通過屬性返回復(fù)印的內(nèi)容

target復(fù)印目標(biāo)內(nèi)容，這里不說，就說一下function和屬性的操作。

（3）Function操作有兩種：第一種：

通過target的function復(fù)印內(nèi)容通過target指定要復(fù)印的節(jié)點(diǎn)，這里返回舒值是‘hello’

<button class='btn'>Copy_target</button> <div>hello</div> <script> var clipboard = new Clipboard(’.btn’, { // 通過target指定要復(fù)印的節(jié)點(diǎn) target: function() { return document.querySelector(’div’); } }); clipboard.on(’success’, function(e) { console.log(e); }); clipboard.on(’error’, function(e) { console.log(e); }); </script>第二種：

通過text的function復(fù)印內(nèi)容text的function指定的復(fù)印內(nèi)容，這里返回‘to be or not to be’

<button class='btn'>Copy</button><script> var clipboard = new Clipboard(’.btn’, { // 點(diǎn)擊copy按鈕，直接通過text直接返回復(fù)印的內(nèi)容 text: function() { return ’to be or not to be’; } }); clipboard.on(’success’, function(e) { console.log(e); }); clipboard.on(’error’, function(e) { console.log(e);});（4）通過屬性返回復(fù)印的內(nèi)容第一種： 單節(jié)點(diǎn)

通過id指定節(jié)點(diǎn)對(duì)象，并做為參數(shù)傳送給Clipboard。這里的返回值的內(nèi)容是data-clipboard-text的內(nèi)容

// 通過id獲取復(fù)制data-clipboard-text的內(nèi)容 <div data-clipboard-text='1'><span>Copy</span></div> <script> var btn = document.getElementById(’btn’); var clipboard = new Clipboard(btn); clipboard.on(’success’, function(e) {console.log(e); }); clipboard.on(’error’, function(e) {console.log(e); });</script>第二種： 多節(jié)點(diǎn)

通過class獲取所有button按鈕，并做為參數(shù)傳送給Clipboard。每個(gè)按鈕被點(diǎn)擊時(shí)，返回值的內(nèi)容是其對(duì)應(yīng)的data-clipboard-text的內(nèi)容，分別是1，2，3

// 通過class注冊(cè)多個(gè)button，獲取data-clipboard-text的值<button data-clipboard-text='1'>Copy</button> <button data-clipboard-text='2'>Copy</button> <button data-clipboard-text='3'>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>（5）函數(shù)和屬性的兼容方式

函數(shù)：

//ClipboardJS.isSupported()//--------這句為：是否兼容var clipboard = new Clipboard(’.btn’);//優(yōu)雅降級(jí):safari 版本號(hào)>=10,提示復(fù)制成功;否則提示需在文字選中后，手動(dòng)選擇“拷貝”進(jìn)行復(fù)制clipboard.on(’success’, function(e) { alert(’復(fù)制成功!’) e.clearSelection();});clipboard.on(’error’, function(e) { alert(’請(qǐng)選擇“拷貝”進(jìn)行復(fù)制!’)//嘗試去掉alert，能彈出系統(tǒng)的“拷貝”工具，但是需要點(diǎn)擊兩次按鈕才能彈出，具體原因還不清楚，參考上圖。有人說可以試一下在觸發(fā)的地方寫一個(gè)空點(diǎn)擊事件, οnclick='' 因?yàn)閕os不單純支持on事件});

屬性：

<img src='http://www.cgvv.com.cn/assets/images/zuop_award/copy_link.png' @click='copy' data-clipboard-action='copy' :data-clipboard-text='’[email protected]’' /> ------------------- copy() { var clipboard = new Clipboard('.email') // console.log(clipboard); clipboard.on('success', e => { // console.log('復(fù)制成功', e); Toast({ message: '復(fù)制成功' }) // 釋放內(nèi)存 clipboard.destroy() }) clipboard.on('error', e => { // 不支持復(fù)制 Toast({ message: '手機(jī)權(quán)限不支持復(fù)制功能' }) console.log('該瀏覽器不支持自動(dòng)復(fù)制') // 釋放內(nèi)存 clipboard.destroy() }) }

到此這篇關(guān)于JavaScript之clipboard用法詳解的文章就介紹到這了,更多相關(guān)JavaScript之clipboard內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！