クリップボード API

クリップボード API は、クリップボードのコマンド (切り取り、コピー、貼り付け) に応答する機能や、システムクリップボードの非同期の読み取りや書き込みを行う機能を提供します。

メモ: この API はウェブワーカーでは利用できません。（WorkerNavigator に公開されていません）。

この API は、 document.execCommand() を使用したクリップボードへのアクセスを置き換えるように設計されています。

メモ: クリップボードは、短期間のデータ保存やデータ転送に使用されるデータバッファで、文書間やアプリケーション間で使用することができます。 通常、無名で一時的なデータバッファーとして実装されており、ペーストバッファーと呼ばれることもあります。環境内のほとんどまたはすべてのプログラムから定義されたプログラミングインターフェイスを通じてアクセス可能です。

一般的なアプリケーションでは、これらのインターフェイスに対して、キーバインド、メニュー選択などのユーザー入力を対応付けることでクリップボード機能にアクセスします。

クリップボードへのアクセス

Clipboard オブジェクトをインスタンス化して生成するのではなく、グローバル変数の Navigator.clipboard を通してシステムクリップボードにアクセスすることができます。

js

navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );

このスニペットはクリップボードからテキストを読み取り、最初に見つかった editor クラスを持つ要素に追加します。 readText() (および場合によっては read()) はクリップボードにテキストがないときには空文字列を返すので、このコードは安全です。

インターフェイス

Clipboard 安全なコンテキスト用

システムクリップボードに対してテキストやデータを読み書きするインターフェイスを提供します。これは仕様書では「非同期クリップボード API」と呼ばれています。

ClipboardEvent 安全なコンテキスト用

クリップボードの変更に関する情報を提供するイベント、すなわち cut, copy, paste イベントを表します。これは仕様書では「クリップボードイベント API」と呼ばれています。

ClipboardItem 安全なコンテキスト用

データの読み書きの際に使用する単一項目形式を表します。

仕様書

Specification
Clipboard API and events
# clipboard-interface
Clipboard API and events
# clipboard-event-interfaces
Clipboard API and events
# clipboarditem

ブラウザーの互換性

api.Clipboard

BCD tables only load in the browser

api.ClipboardEvent

BCD tables only load in the browser

api.ClipboardItem

BCD tables only load in the browser

関連情報