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

JavaScript でクリップボードにコピーする方法 (ブラウザ間共通)

概要

へテキストをクリップボードにコピーすると、3 つの主要なブラウザを利用できますAPI:

1. 非同期クリップボード API (navigator.clipboard.writeText)
2. document.execCommand('copy') (非推奨)
3. コピーをオーバーライドするイベント

開発に関する一般的な考慮事項

• コンソールでコードをテストするときはクリップボード機能を無効にします。
• ページはアクティブ (非同期クリップボード API) またはアクセスするにはユーザー操作 (document.execCommand('copy')) が必要です

実装

非同期フォールバック

ブラウザーの範囲を最適化するには、Async Clipboard API を組み合わせますフォールバックありdocument.execCommand('copy'):

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);
  });
}

クリップボード API の比較

API

機能

サポート

API	Features	Support
Async Clipboard API	Text-focused, asynchronous, supports HTTPS	Chrome 66 (March 2018), works in inactive tabs
document.execCommand('copy')	Synchronous, reads text from DOM	Most browsers (as of April 2015), displays permission prompts
Overriding the Copy Event	Can modify clipboard content from any copy event, supports various data formats	Not directly related to the question

非同期クリップボードAPI

テキスト中心、非同期、HTTPS をサポート

Chrome 66 (2018 年 3 月)、非アクティブなタブで動作

document.execCommand('copy')

同期、テキストを読み取りますDOM

ほとんどのブラウザ (2015 年 4 月現在) は、許可プロンプトを表示します

コピー イベントのオーバーライド

任意のコピー イベントからクリップボードのコンテンツを変更でき、さまざまなデータ形式をサポートします

質問

メモ (2020/02/20)非推奨の権限により、一部のブラウザーではコード スニペットが機能しません。テストと開発には、HTTPS 経由で提供されるアクティブな Web ページを使用します。

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