Clipboard.js：一個被157317個專案瘋搶的JS開源庫

程序视点發表於2024-12-08
JS
大家好，我是程式視點的小二哥! 本期介紹一個非常常用的前端外掛：Clipboard.js。 Clipboard.js 實現了原生 JavaScript （無 Flash）的瀏覽器內容複製到系統剪貼簿的功能。
Clipboard.js 簡介
Clipboard.js 是一個用於將文字複製到剪貼簿的 JS 庫。沒有使用 Flash，沒有使用任何框架，開啟 gzipped 壓縮後僅僅只有 3kb。
Clipboard.js：一個被157317個專案瘋搶的JS開源庫
作者 zenorocha 認為：
將文字複製到剪貼簿應該不難。它不需要幾十個步驟來配置，也不需要載入數百 KB 的檔案。最最重要的是，它不應該依賴於 Flash 或其他任何框架。
該庫依賴於 Selection 和 execCommand API，幾乎所有的瀏覽器都支援 Selection API。然而 execCommand API 卻存在一定的相容性問題：
Clipboard.js：一個被157317個專案瘋搶的JS開源庫
Clipboard.js
Clipboard.js：一個被157317個專案瘋搶的JS開源庫
但是，不用擔心！對於較老的瀏覽器，Clipboard.js 也可以優雅地降級處理。
Clipboard.js 安裝和使用
兩種安裝方式
在使用 Clipboard.js 之前，你可以透過 NPM 或 CDN 的方式來安裝它：
NPM
npm install clipboard --save
CDN
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
簡單使用
設定複製剪貼的內容 從另一個元素複製內容。你可以給目標元素新增一個 data-clipboard-target 屬性來實現這個功能
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>
你還可以定義一個 data-clipboard-action 屬性來指明你想要複製還是剪下內容
<textarea id="bar">小二哥很帥...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> 剪下 </button>
複製當前的內容，需要給目標元素設定一個 data-clipboard-text 屬性即可
<button class="btn" data-clipboard-text="小師妹好好看"> 複製 </button>
事件
如果你想要展示一些使用者反饋，或者在使用者複製/剪下後獲取已經選擇的文字，這裡有個示例供你參考。
我們透過觸發自定義事件，比如 success 和 error 讓你可以設定監聽並實現自定義邏輯
var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });
其他用法
如果你不想修改 HTML，提供了一個非常方面的命令式的 API 給你使用。你需要做的就是宣告一個函式，做一些處理，並返回一個值。
例如, 你希望動態設定target, 你需要返回一個node節點.
new ClipboardJS('.btn', { target: function(trigger) { return trigger.nextElementSibling; } });
如果你希望動態設定text, 你需要返回字串。
new ClipboardJS('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); } });
如果在模態框（Modals）中使用，或是在其他修改焦點的類庫中使用，你會希望將獲得焦點的元素設定為 container 屬性的值。
new ClipboardJS('.btn', { container: document.getElementById('modal') });
同樣地，如果你使用單頁應用，你可能想要更加精確地管理 DOM 的生命週期。你可以清理事件以及建立的物件。
var clipboard = new ClipboardJS('.btn'); clipboard.destroy();
好了！關於 Clipboard.js 的使用，小二哥就介紹到這裡，感興趣的小夥伴可以檢視 Github 上 Clipboard.js 的使用示例。
Clipboard.js https://clipboardjs.com/
寫在最後
【程式視點】助力打工人減負，從來不是說說而已！
後續小二哥會繼續詳細分享更多實用的工具和功能。持續關注，這樣就不會錯過之後的精彩內容啦！
如果這篇文章對你有幫助的話，別忘了【點贊】【分享】支援下哦~

相關文章