（1）介紹：

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

（2）clipboard復印內容的方式有 從target復印目標內容 通過function 要復印的內容 通過屬性返回復印的內容

target復印目標內容，這里不說，就說一下function和屬性的操作。

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

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

<button class='btn'>Copy_target</button> <div>hello</div> <script> var clipboard = new Clipboard(’.btn’, { // 通過target指定要復印的節(jié)點 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復印內容text的function指定的復印內容，這里返回‘to be or not to be’

<button class='btn'>Copy</button><script> var clipboard = new Clipboard(’.btn’, { // 點擊copy按鈕，直接通過text直接返回復印的內容 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）通過屬性返回復印的內容第一種： 單節(jié)點

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

// 通過id獲取復制data-clipboard-text的內容 <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é)點

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

// 通過class注冊多個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)雅降級:safari 版本號>=10,提示復制成功;否則提示需在文字選中后，手動選擇“拷貝”進行復制clipboard.on(’success’, function(e) { alert(’復制成功!’) e.clearSelection();});clipboard.on(’error’, function(e) { alert(’請選擇“拷貝”進行復制!’)//嘗試去掉alert，能彈出系統(tǒng)的“拷貝”工具，但是需要點擊兩次按鈕才能彈出，具體原因還不清楚，參考上圖。有人說可以試一下在觸發(fā)的地方寫一個空點擊事件, οnclick='' 因為ios不單純支持on事件});

屬性：

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

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