複製粘貼插件——clipboard.js的使用

clipboard.js

---

將文本複製到剪貼板應該不難。配置它不須要幾十個步驟，也不須要加載數百KB的js文件 。但最重要的是，它不該該依賴 Flash或任何臃腫的框架。這就是 clipboard.js存在的緣由。

安裝

從npm 安裝

npm install clipboard --save

或者，若是您不喜歡包管理，只需下載一個ZIP文件

設置

• script 引入

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

• 三方 CDN引入

如今須要經過傳遞一個DOM選擇器、一個HTML標籤或者一組HTML標籤來實例化它

new ClipboardJS('.btn');  //經過類名.btn的元素實例化

在內部，咱們須要獲取與選擇器匹配的全部元素，併爲每一個元素附加事件監聽器。但你猜怎麼着?若是有數百個匹配項，則此操做會消耗大量內存。
所以，咱們使用事件委託，它將多個事件偵聽器替換爲一個偵聽器。

使用方法

咱們正在經歷一個聲明性的復興，這就是爲何咱們決定利用HTML5的數據屬性來得到更好的可用性

複製

至關廣泛的使用場景是從其餘元素複製文本。在觸發元素上添加 data-clipboard-target 屬性，該屬性值用來匹配另外一個元素選擇器。

<!-- Target -->
<!-- <input
  id="bar"
  value="無敵大帥哥"
> -->
<p id="bar">無敵大帥哥</p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 複製 </button>

剪切

另外，也能夠定義 data-clipboard-action 屬性爲 copy/cut 來，明確操做是 複製 / 剪切
若是忽略了這個屬性，便默認 複製

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

注意：

• data-clipboard-text 「級別最高」，在 data-clipboard-target 等屬性存在時，複製內容及相關參數以 data-clipboard-text 爲準

事件

回調函數： success / error

事件名	參數
success	event.action copy/cut 操做
	event.text copy/cut 操做文本內容
	event.triger 觸發操做的DOM元素
error	event.action copy/cut 操做
	event.triger 觸發操做的DOM元素

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

工具提示

每一個應用程序有不一樣的設計需求，這就是爲何clipboard.js不包括任何CSS或內置的工具提示解決方案。
您在這個演示站點上看到的工具提示是使用GitHub的Primer構建的。若是你正在尋找類似的外觀和感受，你可能想看看。

高級用法

若是你不想修改你的HTML，有一個很是方便的命令式API供你使用。您所須要作的就是聲明一個函數，執行您的操做，而後返回一個值。

例如 若是想動態的設置一個目標元素target，則須要返回一個節點,即 動態設置點擊複製的目標元素

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling  ||  document.getElementById('name');
    }
});

若是想動態設置內容文本text，則返回一個字符串String

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

在Bootstrap Modals 中或與任何其餘更改焦點的庫一塊兒使用時，將但願將焦點元素設置爲 container 值。

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

而且，若是在單頁應用中使用時，要更精確地管理DOM的生命週期，可使用如下方法清除建立的事件對象

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

瀏覽器支持

這個庫同時依賴於Selection和execCommand api。全部瀏覽器都支持第一個，而如下瀏覽器支持第二個。

• Chrome 42 +
• Edge12 +
• Firefox 41 +
• IE 9 +
• Opera 29 +
• Safari 10 +

好消息是，若是須要支持舊的瀏覽器，clipboard.js能夠優雅地降級。你所要作的就是顯示一個工具提示「複製!」在調用成功事件時，由於文本已經被選中，因此在調用錯誤事件時，請按Ctrl+C進行復制。
你也能夠經過運行ClipboardJS.isSupported()來檢查是否支持clipboard.js，這樣你就能夠從UI中隱藏複製/剪切按鈕。

彩蛋

Chrome 和 Firefox 瀏覽器擴展：在 GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Mediu 的代碼塊中 添加一個 "copy to clipboard" 的按鈕