「譯」利用 JavaScript 複製文本到剪貼板

時間 2019-12-05

標籤利用 javascript 複製文本剪貼板欄目 JavaScript 简体版

原文原文鏈接

原文地址：Copying text to clipboard with JavaScript

原文做者：Angelos Chalaris

本文將會深刻介紹 30 秒代碼中 copyToClipboard 代碼塊的工做原理。你能夠在項目倉庫中找到它的源代碼以及更多其餘的實用方法。javascript

30 秒代碼：能夠在 30 秒或更短期內理解的 JavaScript 代碼塊

核心功能

搭建網站時常常會遇到一個需求，那就是在用戶沒有選中或者使用鍵盤組合鍵的狀況下，複製文本到剪貼板。JavaScript 能夠用短短五步輕鬆解決這個問題：前端

1.建立一個稍後將插入到文檔中的 <textarea> 元素。將咱們想要複製到剪貼板的字符串設置爲它的 value 。 2.將上訴 <textarea> 元素插入到當前的 HTML 文檔中。 3.使用 HTMLInputElement.select() 選中 <textarea> 元素的內容。 4.使用 Document.execCommand('copy') 複製 <textarea> 元素的內容到剪貼板。 5.從文檔中移除 <textarea> 元素。java

這個方法的最簡版本大概以下：git

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};
複製代碼

copyToClipboard 方法的基本實現

記住，這個方法不是在任何狀況下均可以使用的。由於 Document.execCommand() 的工做方式，它必須做爲用戶操做的響應結果。github

讓插入的元素不可見

若是你試用了上面的方法，你可能會在 <textarea> 元素插入或者移除時看到閃爍。這對使用屏幕閱讀器的人來講很糟糕，由於它會致使一些很是煩人的問題。所以，下一步合理的操做就是使用 CSS 讓元素不可見，同時設置只讀，以防止用戶的試圖干擾。web

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};
複製代碼

隱藏文本域的 copyToClipboard 實現

保存和恢復原先的文檔選中

最後須要考慮的問題是，用戶可能已經在 HTML 文檔中選中了一些內容，明智之舉是不移除他們選中的這些內容。幸運的是，咱們可使用諸如 DocumentOrShadowRoot.getSelection(),Selection.rangeCount, Selection.getRangeAt(), Selection.removeAllRanges() 和 Selection.addRange() 等現成的 JavaScript 方法和屬性來保存和恢復原先的文檔選中。這是最終的帶註釋的改良代碼：app

const copyToClipboard = str => {
  const el = document.createElement('textarea');  // 建立一個 <textarea> 元素
  el.value = str;                                 // 設置它的值爲你想複製的字符串
  el.setAttribute('readonly', '');                // 設置爲只讀以防止干擾
  el.style.position = 'absolute';                 
  el.style.left = '-9999px';                      // 移出屏幕外以使其不可見
  document.body.appendChild(el);                  // 插入 <textarea> 元素到 HTML 文檔中
  const selected =            
    document.getSelection().rangeCount > 0        // 檢查是否以前曾選中過內容
      ? document.getSelection().getRangeAt(0)     // 若是找到，則保存選中
      : false;                                    // 標記爲 false 以表示不存在以前選中的內容
  el.select();                                    // 選中 <textarea> 的內容
  document.execCommand('copy');                   // 複製 - 僅看成爲用戶操做的響應結果時才能夠工做(好比，點擊事件)
  document.body.removeChild(el);                  // 移除 <textarea> 元素
  if (selected) {                                 // 若是在複製前已存在選中的內容
    document.getSelection().removeAllRanges();    // 取消 HTML 文檔中全部的選中部分
    document.getSelection().addRange(selected);   // 恢復原來的選中
  }
};
複製代碼