JavaScript を使用してテキストをクリップボードに効率的にコピーするにはどうすればよいですか?

JavaScript でクリップボードにコピーする方法

JavaScript では、ブラウザのサポートに応じて、テキストをクリップボードにコピーする方法が複数あります。

1.非同期クリップボード API [navigator.clipboard.writeText]

Chrome 66 で利用できる非同期クリップボード API は、クリップボードへの非同期アクセスを提供します。 JavaScript Promises を使用するため、ユーザー プロンプトがページを中断することなくシームレスに実行できます。さらに、テキストを変数からクリップボードに直接コピーできます。これは HTTPS 経由で提供されるページでのみ機能することに注意してください。

2. document.execCommand('copy') (非推奨)

このメソッドは同期であり、2015 年 4 月以降、ほとんどのブラウザーでサポートされています。プロセスが完了するまで JavaScript の実行を停止し、ユーザーにセキュリティ プロンプトを表示する可能性があります。 。テキストは DOM からクリップボードにコピーされます。

一般的な開発メモ:

• コンソールでコードをテストしている間は、クリップボード コマンドが機能しない可能性があります。
• ページはアクティブである必要があります (非同期クリップボード API の場合)、またはユーザーの操作が必要です (document.execCommand('copy') の場合)。クリップボードにアクセスします。

フォールバック メソッド:

ブラウザ間の互換性を確保するには、非同期クリップボード API と一緒にフォールバック メソッドを使用することをお勧めします。以下に例を示します:

function fallbackCopyTextToClipboard(text) {
  // Create a textarea element and copy text to it
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // Append the textarea to the body and set properties
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  // Execute the copy command
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  // Remove the textarea from the body
  document.body.removeChild(textArea);
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

以上がJavaScript を使用してテキストをクリップボードに効率的にコピーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。