使用clipboard.js庫實現複製剪下功能

2022-06-26 18:01:52

專案地址：https://github.com/zenorocha/clipboard.js

現代化的“複製到剪下板”外掛。不包含 Flash。gzip 壓縮後僅 3kb。

為什麼使用它

複製文字到剪下板不應該很難去實現。它不需要設定幾十個步驟或者載入幾百 KB 的檔案。最重要的是，它不應該依賴 Flash 或其他臃腫的框架。

這是 clipboard.js 誕生的原因。

安裝

你可以通過 npm 來安裝它。

npm install clipboard --save

如果你不使用包管理，僅需要下載一個ZIP檔案。

開始

首先，引入位於dist目錄下的指令碼檔案，或者引入一個第三方CDN。

<script src="dist/clipboard.min.js"></script>

然後，你需要通過傳入一個DOM 選擇器,HTML 元素, 或者HTML 元素陣列作為引數，來範例化物件。

new Clipboard('.btn');

本質上，我們需要獲取所有選擇器匹配到的元素，併為每一個選擇器設定監聽事件。但仔細想想，如果有成百上千個匹配到的元素，這樣做會耗費大量記憶體。

因此，我們使用事件代理，通過一個事件監聽器來取代多個事件監聽。畢竟，效能是問題。

使用

我們正在經歷一場宣告式的復興，這就是為什麼我們決定利用HTML5data屬性來提高可用性的原因。

從另一個元素複製文字

一個很常見的用例是從另一個元素複製內容。你可以給目標元素新增一個data-clipboard-target屬性來實現這個功能。

這個屬性的值就是能匹配到另一個元素的選擇器。

<!-- 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屬性來指明你想要複製（copy）還是剪下（cut）內容。

如果你省略這個屬性，則預設為複製（copy）。

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

正如你所預料的，剪下（cut）動作只在<input>或<textarea>元素起作用。

從屬性複製文字

事實上，你甚至不需要從另一個元素來複制內容。你僅需要給目標元素設定一個data-clipboard-text屬性就可以了。

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

事件

如果你想要展示一些使用者反饋，或者在使用者複製/剪下後獲取已經選擇的文字，這裡有個範例供你參考。

我們通過觸發自定義事件，例如success和error，讓你可以設定監聽並實現自定義邏輯。

var clipboard = new Clipboard('.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);
});

你可以存取這個網站，開啟控制檯，檢視演示範例。

工具提示（Tooltips）

每個應用有著不同的設計需求，這是為什麼 clipboard.js 沒有包含任何 CSS 或內建的工具提示解決方案。

你在範例網站看到的工具提示是通過GitHub's Primer構建的。如果你正在尋找一個外觀和體驗類似的庫，你可以去看看這個專案。

高階選項

如果你不想修改 HTML，我們提供了一個非常方面的命令式的 API 給你使用。你需要做的就是宣告一個函數，做一些處理，並返回一個值。

例如，如果你希望動態設定target，你需要返回一個節點（Node）.

new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

如果你希望動態設定text，你需要返回一個字串。

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

如果在 Bootstrap 模態框（Modals）中使用，或是在其他修改焦點的類庫中使用，你會希望將獲得焦點的元素設定為container屬性的值。

new Clipboard('.btn', {
    container: document.getElementById('modal')
});

同樣地，如果你使用單頁應用，你可能想要更加精確地管理 DOM 的生命週期。你可以清理事件以及建立的物件。

var clipboard = new Clipboard('.btn');
clipboard.destroy();

瀏覽器支援

這個庫依賴於Selection和execCommand的 API。前者相容所有的瀏覽器，後者相容以下瀏覽器。

好訊息是，如果你需要支援舊瀏覽器，clipboard.js 可以優雅降級。你所要做的就是在success事件觸發時提示使用者“已複製！”，error事件觸發時提示使用者“按 Ctrl+C 複製文字”（此時使用者要複製的文字已經選擇了）。

你也可以通過執行Clipboard.isSupported()來檢查瀏覽器是否支援 clipboard.js，如果不支援，你可以隱藏複製/剪下按鈕。

到此這篇關於clipboard.js實現複製剪下功能的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。