項(xiàng)目地址：https://github.com/zenorocha/clipboard.js

現(xiàn)代化的“復(fù)制到剪切板”插件。不包含 Flash。gzip 壓縮后僅 3kb。

為什么使用它

復(fù)制文字到剪切板不應(yīng)該很難去實(shí)現(xiàn)。它不需要配置幾十個(gè)步驟或者加載幾百 KB 的文件。最重要的是，它不應(yīng)該依賴 Flash 或其他臃腫的框架。

這是 clipboard.js 誕生的原因。

安裝

你可以通過 npm 來安裝它。

npm install clipboard --save

如果你不使用包管理，僅需要下載一個(gè)ZIP文件。

開始

首先，引入位于dist目錄下的腳本文件，或者引入一個(gè)第三方CDN。

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

然后，你需要通過傳入一個(gè)DOM 選擇器,HTML 元素, 或者HTML 元素?cái)?shù)組作為參數(shù)，來實(shí)例化對象。

new Clipboard('.btn');

本質(zhì)上，我們需要獲取所有選擇器匹配到的元素，并為每一個(gè)選擇器設(shè)置監(jiān)聽事件。但仔細(xì)想想，如果有成百上千個(gè)匹配到的元素，這樣做會(huì)耗費(fèi)大量內(nèi)存。

因此，我們使用事件代理，通過一個(gè)事件監(jiān)聽器來取代多個(gè)事件監(jiān)聽。畢竟，性能是問題。

使用

我們正在經(jīng)歷一場聲明式的復(fù)興，這就是為什么我們決定利用HTML5data屬性來提高可用性的原因。

從另一個(gè)元素復(fù)制文本

一個(gè)很常見的用例是從另一個(gè)元素復(fù)制內(nèi)容。你可以給目標(biāo)元素添加一個(gè)data-clipboard-target屬性來實(shí)現(xiàn)這個(gè)功能。

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

<!-- 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>

從另一個(gè)元素剪切文本

此外，你可以定義一個(gè)data-clipboard-action屬性來指明你想要復(fù)制（copy）還是剪切（cut）內(nèi)容。

如果你省略這個(gè)屬性，則默認(rèn)為復(fù)制（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>

正如你所預(yù)料的，剪切（cut）動(dòng)作只在<input>或<textarea>元素起作用。

從屬性復(fù)制文本

事實(shí)上，你甚至不需要從另一個(gè)元素來復(fù)制內(nèi)容。你僅需要給目標(biāo)元素設(shè)置一個(gè)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>

事件

如果你想要展示一些用戶反饋，或者在用戶復(fù)制/剪切后獲取已經(jīng)選擇的文字，這里有個(gè)示例供你參考。

我們通過觸發(fā)自定義事件，例如success和error，讓你可以設(shè)置監(jiān)聽并實(shí)現(xiàn)自定義邏輯。

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);
});

你可以訪問這個(gè)網(wǎng)站，打開控制臺(tái)，查看演示示例。

工具提示（Tooltips）

每個(gè)應(yīng)用有著不同的設(shè)計(jì)需求，這是為什么 clipboard.js 沒有包含任何 CSS 或內(nèi)置的工具提示解決方案。

你在示例網(wǎng)站看到的工具提示是通過GitHub's Primer構(gòu)建的。如果你正在尋找一個(gè)外觀和體驗(yàn)類似的庫，你可以去看看這個(gè)項(xiàng)目。

高級(jí)選項(xiàng)

如果你不想修改 HTML，我們提供了一個(gè)非常方面的命令式的 API 給你使用。你需要做的就是聲明一個(gè)函數(shù)，做一些處理，并返回一個(gè)值。

例如，如果你希望動(dòng)態(tài)設(shè)置target，你需要返回一個(gè)節(jié)點(diǎn)（Node）.

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

如果你希望動(dòng)態(tài)設(shè)置text，你需要返回一個(gè)字符串。

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

如果在 Bootstrap 模態(tài)框（Modals）中使用，或是在其他修改焦點(diǎn)的類庫中使用，你會(huì)希望將獲得焦點(diǎn)的元素設(shè)置為container屬性的值。

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

同樣地，如果你使用單頁應(yīng)用，你可能想要更加精確地管理 DOM 的生命周期。你可以清理事件以及創(chuàng)建的對象。

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

瀏覽器支持

這個(gè)庫依賴于Selection和execCommand的 API。前者兼容所有的瀏覽器，后者兼容以下瀏覽器。

好消息是，如果你需要支持舊瀏覽器，clipboard.js 可以優(yōu)雅降級(jí)。你所要做的就是在success事件觸發(fā)時(shí)提示用戶“已復(fù)制！”，error事件觸發(fā)時(shí)提示用戶“按 Ctrl+C 復(fù)制文字”（此時(shí)用戶要復(fù)制的文字已經(jīng)選擇了）。

你也可以通過運(yùn)行Clipboard.isSupported()來檢查瀏覽器是否支持 clipboard.js，如果不支持，你可以隱藏復(fù)制/剪切按鈕。

到此這篇關(guān)于clipboard.js實(shí)現(xiàn)復(fù)制剪切功能的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論