前端Tips#7 - 用 6 行代碼實現文本複製

本期主要是講一個 JS 技巧，用 6 行代碼實現文本複製的功能。

視頻講解

音頻講解

文字講解

代碼片段

核心的代碼片段就 6 行，利用動態創建 textarea，和 document.execCommand 命令就實現了：

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

替代方案

因爲 document.execCommand 命令雖說還能使用，然而官方建議儘可能少用。官方比較推薦的還是 Navigator.clipboard API，當然該對象還在草案狀態，IE、Safari 也還不支持，所以兼容性需要考慮。

使用 Clipboard_API 就很方便實現 複製、粘貼 功能：

const copyToClipboard = async str => {
    ...
    // 寫入粘貼板
    await navigator.clipboard.writeText(str)
    ...
    // 讀取粘貼板
    await navigator.clipboard.readText()
};

注意事項

• 因爲瀏覽器安全限制， 文本複製 功能必須由用戶主動觸發（比如放在點擊事件裏），而不能一進頁面就自動觸發
• 建議這個代碼片段只是用於 能力增強 部分，就算犧牲掉該功能也沒多大關係。
• 如果非要用於主功能裏，建議使用成熟的 clipboard.js 開源庫

參考文檔

• Copying text to clipboard with JavaScript：30 seconds of code
• How to copy to the clipboard using JavaScript：使用 Clipboard_API

本文分享自微信公衆號 - JSCON簡時空（iJSCON）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。