（1）介紹：

clipboard.js是一款輕量級的實現復制文本到剪貼板功能的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指定要復印的節點，這里返回舒值是‘hello’

<button class='btn'>Copy_target</button> <div>hello</div> <script> var clipboard = new Clipboard(’.btn’, { // 通過target指定要復印的節點 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）通過屬性返回復印的內容第一種： 單節點

通過id指定節點對象，并做為參數傳送給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>第二種： 多節點

通過class獲取所有button按鈕，并做為參數傳送給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）函數和屬性的兼容方式

函數：

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

屬性：

<img src='http://www.aoyou183.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('復制成功', e); Toast({ message: '復制成功' }) // 釋放內存 clipboard.destroy() }) clipboard.on('error', e => { // 不支持復制 Toast({ message: '手機權限不支持復制功能' }) console.log('該瀏覽器不支持自動復制') // 釋放內存 clipboard.destroy() }) }

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