將字符串復制到剪貼板，而不使用 DOM 元素？

Question

我有這個有效的代碼：

let textarea = document.createElement('textarea');
textarea.setAttribute('type', 'hidden');
textarea.textContent = 'the string you want to copy';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');

如您所見 - 我手頭有要復制的字符串。 但是在復制到剪貼板之前，我必須創建一個臨時隱藏的 DOM 元素來對字符串進行評分。

我的問題是，是否有一些 API 可以在根本不需要 DOM 的情況下復制到剪貼板？ 像這樣：

document.execCommand('copy', 'the string data to put in clipboard');

DOM 是必要的，這似乎很奇怪。 另外，作為旁注，這個剪貼板 API 非常奇怪，其他人同意嗎？

Answer 1

我最近遇到了和你一樣的問題，但沒有一個解決方案提供了不影響 DOM 的解決方案。 以下內置功能可以幫助您。

copyToClipboard("Your variable/string")

copyToClipboard函數允許您將變量或字符串復制到系統剪貼板。 這是 剪貼板 API click for Docs 的一部分。

Answer 2

您可以使用異步剪貼板 API ，該API用於在 Web 應用程序中實現剪切、復制和粘貼功能，但請記住，它適用於安全連接 (HTTPS) 和本地主機。

const copyToClipboard = (textToCopy) => {
   navigator.clipboard.writeText(textToCopy)
   .then(() => {
      // actions to take
   })
   .catch(err => {
      console.log('Something went wrong', err);
   });
 }