JavaScript で複数のブラウザ間でテキストをクリップボードに効率的にコピーするにはどうすればよいですか?

複数のブラウザ用の JavaScript でテキストをクリップボードにコピーする

概要: どの API を使用すればよいですか?

テキストをクリップボードにコピーするには、JavaScript が提供する3つの主要なブラウザAPI:

• 非同期クリップボード API (navigator.clipboard.writeText):

  • Chrome 66 で利用可能
  • 非同期と用途Promises
  • ユーザープロンプトの中断を避けるために記述できます
  • HTTPS でのみサポートされますページ

• document.execCommand('copy'):

  • ブラウザ間で広くサポートされています
  • 同期、ページ実行を停止するまでcomplete
  • DOM からテキストを読み取り、クリップボードに配置します

• コピー イベントをオーバーライドします:

  • 任意のコピーのクリップボード内容の変更を許可しますイベント
  • プレーンテキスト以外の複数のデータ形式をサポートします
  • ここでは直接取り上げません

一般的な開発ノート

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

非同期フォールバック アプローチ

ブラウザのサポートが異なるため、フォールバック方式を使用することをお勧めします。例:

function fallbackCopyTextToClipboard(text) {
  // ...
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) fallbackCopyTextToClipboard(text);
  // ...
}

デモと結論

コードをテストして実際の動作を確認するには、このデモ ページにアクセスしてください。 IFRAME の権限の問題により、埋め込みサンプルが機能しない可能性があることに注意してください。

ブラウザ間の完全な互換性を確保するには、サポートされている場合は Async Clipboard API を使用し、サポートされていない場合は document.execCommand('copy') にフォールバックします。

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