JS でクリップボード API を使用する方法

JS でクリップボード API を使用する方法

1. Document.execCommand() メソッド

Document.execCommand() はクリップボードを操作するための従来の方法であり、さまざまなブラウザでサポートされています。

コピー、切り取り、貼り付けの 3 つの操作をサポートします。

  • document.execCommand('コピー')
  • document.execCommand('cut')
  • document.execCommand('貼り付け')

(1)コピー操作

コピーするときは、まずテキストを選択し、次に document.execCommand('copy') を呼び出すと、選択したテキストがクリップボードに追加されます。

定数 inputElement = document.querySelector('#input');
入力要素を選択します。
document.execCommand('コピー');

上記の例では、スクリプトは最初に inputElement inputElement (inputElement.select()) 内のテキストを選択し、次に document.execCommand('copy') を使用してそれをクリップボードにコピーします。

コピー操作は、ユーザーによってトリガーされるイベント リスニング関数 (たとえば、ユーザーがボタンをクリックする) に配置するのが最適であることに注意してください。一部のブラウザでは、スクリプトが自律的に実行されるとエラーが報告される場合があります。

(2)貼り付け操作

貼り付けるときに、document.execCommand('paste') を呼び出すと、クリップボードの内容が現在フォーカスされている要素に出力されます。

const pasteText = document.querySelector('#output');
貼り付けテキスト.focus();
document.execCommand('貼り付け');

(3)デメリット

Document.execCommand() メソッドは便利ですが、いくつか欠点もあります。

まず、選択したコンテンツのみをクリップボードにコピーすることができ、任意のコンテンツをクリップボードに書き込むことはできません。

第二に、これは同期操作であり、大量のデータをコピー/貼り付けすると、ページが遅くなります。一部のブラウザでは、ユーザーの許可を求めるプロンプト ボックスが表示され、ユーザーが選択する前にページが応答しなくなります。

これらの問題を解決するために、ブラウザメーカーは非同期クリップボード API を提案しました。

2. 非同期クリップボードAPI

Clipboard API は、従来の document.execCommand() メソッドよりも強力で合理的な次世代のクリップボード操作メソッドです。

すべての操作は非同期であり、Promise オブジェクトを返すため、ページの遅延は発生しません。さらに、任意のコンテンツ(画像など)をクリップボードに入れることもできます。

navigator.clipboard プロパティは Clipboard オブジェクトを返し、すべての操作はこのオブジェクトを通じて実行されます。

定数clipboardObj = navigator.clipboard;

navigator.clipboard プロパティが undefined を返す場合、現在のブラウザがこの API をサポートしていないことを意味します。

ユーザーは機密データ (パスワードなど) をクリップボードに置く可能性があるため、スクリプトがそれを任意に読み取ることができるようにするとセキュリティ上のリスクが生じます。そのため、この API には多くのセキュリティ制限があります。

まず、Chrome ブラウザでは、HTTPS プロトコルを使用するページのみがこの API を使用できると規定されています。ただし、開発環境 (localhost) では暗号化されていないプロトコルの使用が許可されます。

次に、呼び出すときにユーザーの許可を明示的に取得する必要があります。権限の具体的な実装には、Permissions API を使用します。クリップボードに関連する権限には、clipboard-write (書き込み権限) と clipboard-read (読み取り権限) の 2 つがあります。 「書き込み権限」はスクリプトに自動的に付与されますが、「読み取り権限」はユーザーが明示的に付与する必要があります。つまり、クリップボードへの書き込みはスクリプトによって自動的に実行されますが、クリップボードを読み取るときは、ブラウザが読み取りに同意するかどうかをユーザーに尋ねるダイアログ ボックスをポップアップ表示します。

さらに、スクリプトは常に現在のページのクリップボードを読み取ることに注意してください。これによって生じる問題の 1 つは、関連するコードを開発者ツールに貼り付けて直接実行すると、この時点での現在のページが Web ページではなく開発者ツール ウィンドウであるため、エラーが発生する可能性があることです。

(非同期() => {
  const テキスト = navigator.clipboard.readText() を待機します。
  console.log(テキスト);
})();

上記のコードを開発者ツールに貼り付けて実行すると、エラーが発生します。コードの実行中は、開発者ツール ウィンドウが現在のページであり、このページには Clipboard API が依存する DOM インターフェイスがないためです。 1 つの解決策は、関連するコードを setTimeout() に入れて実行を遅らせ、関数を呼び出す前にブラウザ ページ ウィンドウをすばやくクリックして現在のページにすることです。

setTimeout(非同期() => {
  const テキスト = navigator.clipboard.readText() を待機します。
  console.log(テキスト);
}, 2000);

上記のコードを開発者ツールに貼り付けて実行した後、Web ページのページ ウィンドウをすばやくクリックして現在のページにすると、エラーは報告されなくなります。

3. クリップボードオブジェクト

Clipboard オブジェクトは、クリップボードの読み取りと書き込みを行う 4 つのメソッドを提供します。これらはすべて Promise オブジェクトを返す非同期メソッドです。

3.1 クリップボード.readText()

Clipboard.readText() メソッドは、クリップボード内のテキスト データをコピーするために使用されます。

ドキュメント本体にイベントリスナーを追加します(
  'クリック'、
  非同期(e)=> {
    const テキスト = navigator.clipboard.readText() を待機します。
    console.log(テキスト);
  }
)

上記の例では、ユーザーがページをクリックすると、クリップボード内のテキストが出力されます。このとき、ブラウザにダイアログ ボックスが表示され、スクリプトがクリップボードを読み取ることを許可するかどうかをユーザーに尋ねることに注意してください。

ユーザーが同意しない場合、スクリプトはエラーを報告します。このとき、エラーを処理するために try...catch 構造を使用できます。

非同期関数 getClipboardContents() {
  試す {
    const テキスト = navigator.clipboard.readText() を待機します。
    console.log('貼り付けられたコンテンツ: ', text);
  } キャッチ (エラー) {
    console.error('クリップボードの内容の読み取りに失敗しました: ', err);
  }
}

3.2 クリップボード.read()

Clipboard.read() メソッドは、クリップボード内のデータ (テキスト データまたはバイナリ データ (画像など)) をコピーするために使用されます。この方法ではユーザーからの明示的な許可が必要です。

このメソッドは Promise オブジェクトを返します。オブジェクトの状態が解決されると、配列を取得できます。配列の各メンバーは ClipboardItem オブジェクトのインスタンスです。

非同期関数 getClipboardContents() {
  試す {
    const clipboardItems = navigator.clipboard.read() を待機します。
    for (const clipboardItem of clipboardItems) {
      for (clipboardItem.typesのconst型) {
        const blob = clipboardItem.getType(type); を待機します。
        console.log(URL.createObjectURL(blob));
      }
    }
  } キャッチ (エラー) {
    コンソールエラー(err.name、err.message);
  }
}

ClipboardItem オブジェクトは、単一のクリッピング項目を表します。各クリッピング項目には、ClipboardItem.types プロパティと ClipboardItem.getType() メソッドがあります。

ClipboardItem.types プロパティは、クリップボード項目で使用可能な MIME タイプをメンバーとする配列を返します。たとえば、クリップボード項目を HTML 形式またはプレーン テキスト形式で貼り付けることができる場合、2 つの MIME タイプ (text/html と text/plain) が存在します。

ClipboardItem.getType(type) メソッドは、クリップボード項目のデータを読み取るために使用され、Promise オブジェクトを返します。このメソッドは、クリップ アイテムの MIME タイプをパラメータとして受け入れ、そのタイプのデータを返します。このパラメータは必須です。指定しないと、エラーが報告されます。

3.3 クリップボード.writeText()

Clipboard.writeText() メソッドは、テキスト コンテンツをクリップボードに書き込むために使用されます。

ドキュメント本体にイベントリスナーを追加します(
  'クリック'、
  非同期(e)=> {
    navigator.clipboard.writeText('Yo') を待ちます。
  }
)

上記の例は、ユーザーが Web ページをクリックした後、スクリプトがテキスト データをクリップボードに書き込むことを示しています。

このメソッドはユーザーの許可を必要としませんが、エラーを防ぐために try...catch 内に配置するのが最適です。

非同期関数 copyPageUrl() {
  試す {
    navigator.clipboard.writeText(location.href) を待機します。
    console.log('ページURLがクリップボードにコピーされました');
  } キャッチ (エラー) {
    console.error('コピーに失敗しました: ', err);
  }
}

3.4 クリップボード.write()

Clipboard.write() メソッドは、テキスト データまたはバイナリ データなど任意のデータをクリップボードに書き込むために使用されます。

このメソッドは、クリップボードに書き込まれるデータを表す ClipboardItem インスタンスをパラメーターとして受け入れます。

試す {
  const imgURL = 'https://dummyimage.com/300.png';
  const data = await fetch(imgURL);
  const blob = data.blob() を待機します。
  ナビゲータ.クリップボード.書き込み([
    新しいクリップボードアイテム({
      [blob.type]: ブロブ
    })
  ]);
  console.log('画像をコピーしました。');
} キャッチ (エラー) {
  コンソールエラー(err.name、err.message);
}

上記の例では、スクリプトは画像をクリップボードに書き込みます。 Chrome は現在 PNG 形式の画像の書き込みのみをサポートしていることに注意してください。

ClipboardItem() は、ブラウザによってネイティブに提供されるコンストラクターで、ClipboardItem インスタンスを生成するために使用されます。これは、オブジェクトをパラメーターとして受け入れます。オブジェクトのキー名はデータの MIME タイプであり、キー値はデータそのものです。

次の例では、同じクリップ項目の値を複数の形式でクリップボードに書き込みます。1 つはテキスト データ、もう 1 つはバイナリ データで、さまざまな場面で貼り付けられるようにします。

関数コピー() {
  const image = await fetch('kitten.png');
  const text = new Blob(['かわいい眠っている子猫'], {type: 'text/plain'});
  const item = 新しいクリップボードアイテム({
    'text/plain': テキスト、
    'image/png': 画像
  });
  navigator.clipboard.write([item]) を待機します。
}

4. イベントのコピー、イベントの切り取り

ユーザーがクリップボードにデータを入れると、コピー イベントがトリガーされます。

次の例では、ユーザーがクリップボードに入力したテキストを大文字に変換します。

定数ソース = document.querySelector('.source');

source.addEventListener('コピー', (イベント) => {
  定数選択 = document.getSelection();
  イベント.クリップボードデータ.setData('text/plain', 選択.toString().toUpperCase());
  イベントをデフォルトにしない();
});

上記の例では、イベント オブジェクトの clipboardData プロパティにクリップボード データが含まれています。以下のプロパティとメソッドを持つオブジェクトです。

  • Event.clipboardData.setData(type, data): クリップボードデータを変更します。データ型を指定する必要があります。
  • Event.clipboardData.getData(type): クリップボードデータを取得します。データ型を指定する必要があります。
  • Event.clipboardData.clearData([type]): クリップボードのデータをクリアします。データ型を指定できます。タイプを指定しない場合は、すべてのタイプのデータがクリアされます。
  • Event.clipboardData.items: すべてのクリップボード項目を含む配列のようなオブジェクトですが、通常はクリップボード項目は 1 つだけです。

次の例では、ユーザーのコピー操作をインターセプトし、指定されたコンテンツをクリップボードに格納します。

定数クリップボードアイテム = [];

document.addEventListener('コピー', async (e) => {
  e.preventDefault();
  試す {
    クリップボードアイテムを [] にします。
    (e.clipboardData.items の定数項目) {
      if (!item.type.startsWith('image/')) {
        続く;
      }
      クリップボードアイテム.push()
        新しいクリップボードアイテム({
          [アイテム.タイプ]: アイテム、
        })
      );
      navigator.clipboard.write(clipboardItems); を待機します。
      console.log('画像をコピーしました。');
    }
  } キャッチ (エラー) {
    コンソールエラー(err.name、err.message);
  }
});

上記の例では、e.preventDefault() を使用してクリップボードのデフォルト操作をキャンセルし、スクリプトがコピー操作を引き継ぎます。

カットイベントは、ユーザーがカット操作を実行したときにトリガーされます。処理はコピーイベントとまったく同じで、カットデータは Event.clipboardData プロパティから取得されます。

5. イベントを貼り付ける

ユーザーがクリップボードのデータを使用して貼り付けると、貼り付けイベントがトリガーされます。

次の例では、貼り付け操作をインターセプトし、スクリプトを使用してクリップボードからデータを取得します。

document.addEventListener('貼り付け', 非同期(e) => {
  e.preventDefault();
  const テキスト = navigator.clipboard.readText() を待機します。
  console.log('貼り付けられたテキスト: ', text);
});

以上が、JS が Clipboard API を使用してクリップボードを操作する方法の詳細です。JS がクリップボードを使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • コードブロックのハイライトをコピーして表示できる js プラグイン highlight.js + clipboard.js 統合
  • Vue は Clipboard.JS を使用して h5 ページのコンテンツ例をコピーします。
  • Vue で clipboard.js を使用してワンクリックでテキストをコピーする例
  • JSプラグインclipboard.jsはワンクリックのコピー&ペースト機能を実現します
  • モバイル端末でのclipboard.jsのコピー失敗の解決策
  • clipboard.js を使用してコピー機能を実装するサンプルコード
  • ZeroClipboard.jsは1つのフラッシュを使用して複数のテキストボックスをコピーします
  • JavaScript クリップボードの使用法の詳細な説明

<<:  インターネット接続なしでLinux Centos7にアプリケーションをインストールする方法の詳細な説明

>>:  MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル

推薦する

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

跳ねるボールを実現するネイティブjs

思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...

MySQL の暗黙的な型変換によって発生するインデックス障害の解決策

目次質問再生暗黙的な変換要約する参照する質問仕事中、1 つの SQL クエリ ステートメントのみを実...

JSメモリ空間の詳細な説明

目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...

7つの便利なTypeScriptの新機能

目次1. オプションの連鎖2. NULL値の結合3. 再帰型エイリアス4. アサーション署名5. P...

MYSQLデータベーステーブル構造の最適化方法の詳細な説明

この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...

TCP 3 回目のハンドシェイク データ転送プロセス図

RFC793 ドキュメントの SYN フラグを持つプロセス パケットはデータを伝送できません。つま...

Linux の fsevents モジュールによって発生する npm ls エラーの解決方法の詳細な説明

Mac で開発されたプロジェクトがあり、パッケージ npm i がインストールされており、すべて正常...

js SMS認証コード入力ボックスを手動で実装する

序文この記事では、私が手動で実装したフロントエンドの一般的な SMS 認証コード入力コンポーネントと...

CSS を使用して等アスペクト比のアダプティブ コンテナを実装する方法

最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携...

スプライトとフォントアイコンを実装するためのCSS

スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...

CSS3はシームレスなスクロールと手ぶれ防止を実現します

質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...

mysql はフィールドコンテンツの一部を置き換え、mysql は関数 replace() を置き換えます。

[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...

フレックスレイアウトでコンテナ内のコンテンツを維持するためのソリューションの詳細な説明

モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整...