以下內容轉自[clipboard.js中文網](http://www.clipboardjs.cn/)
[](https://travis-ci.org/zenorocha/clipboard.js)
> 現代化的“復制到剪切板”插件。不包含 Flash。gzip 壓縮后僅 3kb。
[](https://clipboardjs.com/)
## 為什么使用它
復制文字到剪切板不應該很難去實現。它不需要配置幾十個步驟或者加載幾百 KB 的文件。最重要的是，它不應該依賴 Flash 或其他臃腫的框架。
這是 clipboard.js 誕生的原因。
## 安裝
你可以通過 npm 來安裝它。
npm install clipboard --save
如果你不使用包管理，僅需要下載一個 [ZIP](https://github.com/zenorocha/clipboard.js/archive/master.zip) 文件。
## 開始
首先，引入位于 `dist` 目錄下的腳本文件，或者引入一個第三方[CDN](https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers)。
<script src="dist/clipboard.min.js"></script>
然后，你需要通過傳入一個[DOM 選擇器](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18), [HTML 元素](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17), 或者 [HTML 元素數組](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19)作為參數，來實例化對象。
new Clipboard('.btn');
本質上，我們需要獲取所有選擇器匹配到的元素，并為每一個選擇器設置監聽事件。但仔細想想，如果有成百上千個匹配到的元素，這樣做會耗費大量內存。
因此，我們使用[事件代理](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation)，通過一個事件監聽器來取代多個事件監聽。畢竟，[性能是問題](https://twitter.com/hashtag/perfmatters)。
## 使用
我們正在經歷一場聲明式的復興，這就是為什么我們決定利用 [HTML5 `data` 屬性](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) 來提高可用性的原因。
### 從另一個元素復制文本
一個很常見的用例是從另一個元素復制內容。你可以給目標元素添加一個 `data-clipboard-target` 屬性來實現這個功能。
這個屬性的值就是能匹配到另一個元素的選擇器。
[](https://clipboardjs.com/#example-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`）。
[](https://clipboardjs.com/#example-action)
<!-- 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` 屬性就可以了。
[](https://clipboardjs.com/#example-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);
});
你可以訪問這個[網站](https://clipboardjs.com/)，打開控制臺，查看演示示例。
## 工具提示（Tooltips）
每個應用有著不同的設計需求，這是為什么 clipboard.js 沒有包含任何 CSS 或內置的工具提示解決方案。
你在[示例網站](https://clipboardjs.com/)看到的工具提示是通過 [GitHub's Primer](http://primercss.io/tooltips/) 構建的。如果你正在尋找一個外觀和體驗類似的庫，你可以去看看這個項目。
## 高級選項
如果你不想修改 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](https://developer.mozilla.org/en-US/docs/Web/API/Selection) 和 [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) 的 API。前者 [兼容所有的瀏覽器](http://caniuse.com/#search=selection)，后者兼容以下瀏覽器。
42+ ?
12+ ?
41+ ?
9+ ?
29+ ?
10+ ?
好消息是，如果你需要支持舊瀏覽器，clipboard.js 可以優雅降級。你所要做的就是在 `success` 事件觸發時提示用戶“已復制！”，`error` 事件觸發時提示用戶“按 Ctrl+C 復制文字”（此時用戶要復制的文字已經選擇了）。
你也可以通過運行 `Clipboard.isSupported()` 來檢查瀏覽器是否支持 clipboard.js，如果不支持，你可以隱藏復制/剪切按鈕。
## 福利
一個瀏覽器拓展程序，可以添加一個“復制到剪切板”按鈕到所有的代碼塊，支持 _GitHub，MDN，Gist，StackOverflow，StackExchange，npm，甚至 Medium。_
安裝：[谷歌瀏覽器](https://chrome.google.com/webstore/detail/codecopy/fkbfebkcoelajmhanocgppanfoojcdmg)、[火狐瀏覽器](https://addons.mozilla.org/en-US/firefox/addon/codecopy/)。
## 協議
[MIT 協議](http://zenorocha.mit-license.org/) ? Zeno Rocha
