不依賴Flash 實現剪貼板複製

---

不依賴Flash，實現剪貼板複製

本文轉載自：衆成翻譯
譯者：奈末
鏈接：http://www.zcfy.cc/article/806
原文：https://hacks.mozilla.org/2015/09/flash-free-clipboard-for-the-web/

    推動Web平臺進步，促使Web支持更多新設備的努力嘗試從未停止，其中一項便是減少Web對Flash的依賴。作爲這項工作的一部分，我們正在爲全Web平臺標準化並實現一些有效的特性，雖然當前這些特性只能依賴Flash。

    很多站點仍未拋棄Flash的原因之一，是複製和粘貼這兩個剪貼板API。Flash提供一個API，能夠在點擊按鈕時動態複製文本到用戶的剪貼板。它備用來實現一些便利的功能，比如說GitHub的“copy to clipboard”(複製到剪貼板)按鈕。同時，在開發類似文本編輯器UI的場景裏它也很有價值：與其讓用戶使用鍵盤快捷鍵或者右鍵菜單，不如一鍵複製來得好。

    但是，Web APIs尚未提供通過JavaScript複製文本到剪貼板的功能。這也是爲什麼禁用Flash訪問GitHub時，一個灰色醜陋的區塊取代了原本的複製按鈕。令人慶幸的是，我們已經有了一個辦法。HTML Editing APIs提供了document.execCommand作爲執行一些文本編輯命令的入口。之前網頁環境下禁用了複製copy和剪切cut兩個名令，但是從Firefox 41開始，用戶觸發的回調JavaScript已經可以使用這兩個命令了。

使用 ` execCommand (“cut”/”copy”) `

---

    execCommand("cut"/"copy") API只能在用戶觸發的回調裏使用，比如說一次click事件。如果在其他環境下嘗試調用，execCommand將會返回false，表徵該命令執行失敗。運行execCommand("copy")會將當前選中的內容複製到剪貼板， 現在我們來實現一個基本的一鍵複製按鈕。

// 事件依附的按鈕
var button = ...;
// 包含待複製內容的input
var input = ...;

button.addEventListener("click", function(event) {
  event.preventDefault();
  // 選取input元素的內容
  input.select();
  // 將選區內容複製到剪貼板
  document.execCommand("copy");
});

    在Firefox 41及更高版本瀏覽器中，以上代碼會在按鈕點擊後觸發一次複製行爲，將input內的文本複製到系統的剪貼板。不過，很可能你需要考慮不兼容的情況：可以使用另一個基於Flash的方法作爲備用，例如ZeroClipboard，或者乾脆告訴用戶他們的瀏覽器不支持此功能。

    execCommand方法執行失敗時會返回false，比如說在用戶觸發的回調之外嘗試調用的時候。但是，在更早版本的Firefox中嘗試對cut和copy調用，瀏覽器會拋出安全性異常SecurityException。所以爲了確保捕獲所有的異常，要將調用語句包在try-catch裏，這樣catch到的異常也作爲調用失敗處理。

// 事件依附的按鈕
var button = ...;
// 包含待複製內容的input
var input = ...;

button.addEventListener("click", function(event) {
  event.preventDefault();
  input.select(); // 選取input元素的內容
  var succeeded;
  try {
    // 將選區內容複製到剪貼板
    succeeded = document.execCommand("copy");
  } catch (e) {
    succeeded = false;
  }
  if (succeeded) {
    // 複製成功
  } else {
    // 複製失敗 :(
  }
});

cut API的應用同上，把copy替換爲cut即可。

特性測試

---

    HTML Editing APIs提供了document.queryCommandSupported("copy")方法，方便使用者檢測某個命令是否被瀏覽器支持。但是在低於Firefox 41的火狐瀏覽器裏， 縱使實際上開發者無法使用copy命令（嘗試調用document.execCommand("copy") 會得到一個SecurityException），此檢測方法仍然返回了true。所以在Firefox裏最簡單的支持document.execCommand("copy")特性檢測的辦法很可能是這樣：頁面加載完成則嘗試使用copy，檢測是否拋出SecurityException。

var supported = document.queryCommandSupported("copy");
if (supported) {
  // 檢測瀏覽器是否爲比Firefox 41更低的版本
  try {
    document.execCommand("copy");
  } catch (e) {
    supported = false;
  }
}
if (!supported) {
  // 使用備用方法，比如ZeroClipboard，http://zeroclipboard.org/
}

其他瀏覽器的兼容情況

---

    谷歌Chrome和IE都支持此API。Chrome和Firefox使用相同的限制策略（調用必須在用戶觸發的事件回調裏）。IE則允許隨意調用，只在第一次調用時詢問用戶是否允許操控剪貼板。

更多關於此API的信息或瀏覽器支持情況，可以查看：

MDN documentation for document.execCommand().

譯者附: Can I use execcommand

關於作者

---

Michael Layzell

https://github.com/mystor

More articles by Michael Layzell…

---