20 行 JS 代碼，實現複製到剪貼板功能

使用系統提供的剪貼板是一項基本的IT技能。做爲一個開發者，相信你已經知道使用 Ctrl/Cmd+A, Ctrl/Cmd+C 以及 Ctrl/Cmd+V 組合鍵就能快捷地進行選中、複製、粘貼。

但對於普通用戶來講就沒那麼容易了。即便用戶知道剪貼板的存在，視力再好、反應再快的用戶也很難選中他們想要的文字。接下來，若是用戶沒有掌握快捷鍵，或者沒發現瀏覽器隱藏的「編輯」菜單，又或者沒用過右鍵菜單，再或者不知道在觸摸屏上須要進行長按，後續的複製過程也很難簡單完成。

若是提供一個一鍵「複製到剪貼板」按鈕，是否是就能幫到你們呢？這樣的話即便是熟練的鍵盤快手也會樂於使用吧。

剪貼板的安全機制

幾年前，由於瀏覽器不具有直接訪問剪貼板的能力，開發者只能藉助於Flash插件來提供這一基本功能。

乍一看開放剪貼板權限彷佛沒什麼危害，但試想若是瀏覽器能隨意查看和操做剪貼板內容的話，頁面腳本（包括第三方腳本）豈不是就能輕鬆偷窺其中的信息而後將密碼，敏感信息，甚至整個頁面發送給遠端的服務器了。

如今，咱們已經能夠整合基本的剪貼板功能，但仍是有一些限制：

大部分瀏覽器支持剪貼板功能，Mac和iOS上的Safari除外。

不一樣瀏覽器的支持程度不盡相同，一些功能並不完整或存在缺陷。

用戶必須經過點擊鼠標或按鍵的方式來主動觸發，腳本並不能隨時操縱剪貼板。

document.execCommand() 方法

document.execCommand() 是須要調用的關鍵方法，它能夠傳入的參數包括 ‘cut’, ‘copy’ 和 ‘paste’ 。這裏重點介紹最實用的 document.execCommand(‘copy’) 方法。

在調用以前，可使用 document.queryCommandSupported(‘copy’); 或 document.queryCommandEnabled(‘copy’); 方法（這兩個方法功能相同）來檢測瀏覽器是否支持複製命令。須要注意的是，Chrome 雖然支持複製命令的，但在 Chorme 中這兩個方法都會返回 false 值。檢測 document.execCommand 方法是否存在也是一個判斷方法，但更好的作法是將 document.execCommand(‘copy’) 調用放在 try-catch 塊內。

接下來就得考慮用戶能複製什麼內容了，腳本須要可以選中文本，好在全部的瀏覽器都容許使用 select() 方法選擇文本輸入和文本區域的內容，而且在 Firefox 和 Chrome／Opera 瀏覽器中，還能使用 document.createRange 方法來從任何元素中選擇文本。

// select text in #myelement node

// 選擇 #myelement 標籤中的文本

var

  myelement = document.getElementById('#myelement'),

  range = document.createRange();

range.selectNode(myelement);

window.getSelection().addRange(range);

然而，IE/Edge 並不支持這一方法。

使用clipboard.js

若是你已經放棄打造一個高魯棒性的跨瀏覽器剪貼板方案，那麼 clipboard.js 會是一個不錯的選擇。它提供了多種配置方法，例如經過添加 HTML5 數據屬性來指定觸發器和複製對象。

<input id="copyme" value="text in this field will be copied" />

<button data-clipboard-target="#copyme">copy</button>

本身來實現

雖然 clipboard.js 只有 2kb，但咱們只用20行代碼就能實現，前提是你能接受如下條件：

• 只有對應的表單區域可以被複制

• 在一些瀏覽器中無效（沒錯，就是Safari），但能夠在選中文本後提示用戶使用快捷鍵 Ctrl/Cmd + C。

像 clipboard.js 同樣，咱們會使用一個按鈕做爲觸發器，添加數據屬性（data-copytarget）來指定拷貝內容的目標（#website）：

<input type="text" id="website" value="http://www.sitepoint.com/" />

<button data-copytarget="#website">copy</button>

下面的自執行函數會給全部帶有 data-copytarget 屬性的元素添加一個點擊事件處理方法，去選中區域裏的文本並執行 document.execCommand(‘copy’) 。若是這一操做失敗了，文本將保持選中狀態同時彈出提示。

(function() {

  'use strict';

  // click events

  // 添加點擊事件

  document.body.addEventListener('click', copy, true);

  // event handler

  // 添加時間處理方法

  function copy(e) {

    // find target element

    // 搜索目標元素

    var

      t = e.target,

      c = t.dataset.copytarget,

      inp = (c ? document.querySelector(c) : null);

    // is element selectable?

    // 判斷元素是否能被選中

    if (inp && inp.select) {

      // select text

      // 選擇文本

      inp.select();

      try {

        // copy text

        // 複製文本

        document.execCommand('copy');

        inp.blur();

      }

      catch (err) {

        alert('please press Ctrl/Cmd+C to copy');

      }

    }

  }

})();

其餘用途

你還能夠設計出更棒的剪貼板功能特性。例如，在 Trello.com 網站中，當你把鼠標指針放在任何卡片上方時，使用快捷鍵 Ctrl/Cmd+C 就能將卡片的url複製到剪貼板。實際上，程序建立了一個包含 URL 地址的隱藏表單而後進行了選中和複製。雖然我懷疑不多有用戶會知道這一功能，但這的確是實用又聰明的方法！