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

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

概要

JavaScript でテキストをクリップボードにコピーするには、次の 3 つがあります。鍵API:

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

   • Chrome 66 以降のプライマリ API (2018 年 3 月) ).
   • JavaScript を使用した非同期アクセススムーズなユーザー エクスペリエンスを保証します。
   • テキストは変数から直接コピーできます。
   • へのアクセスには HTTPS が必要です。 Clipboard.

2. document.execCommand('copy'):

   • 非推奨ですが広くサポートされています。
   • 同期アクセス。コピーが完了するまで JavaScript の実行を停止します。完了しました。
   • テキストは DOM から読み取られ、クリップボードに配置されます。
   • コンソールでのテスト中にセキュリティ プロンプトが表示される場合があります。

3. コピーをオーバーライドするイベント:

   • コピー イベントからのクリップボード データの変更を許可します。
   • プレーン テキスト以外の複数のデータ形式をサポートします。

開発注

• クリップボード関連のコマンドは、コンソール テストでは機能しない可能性があります。多くの場合、ページ操作またはアクティブなタブが必要です。
• IFRAME のクロスオリジン権限がブラウザーで非推奨になったため、埋め込みデモは Chrome や Microsoft Edge などのブラウザーでは動作しない可能性があります。

Async Plus Fallback

Async Clipboard API とフォールバックの組み合わせdocument.execCommand('copy') にすると、幅広いブラウザーのサポートが保証されます:

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 サイトの他の関連記事を参照してください。