Clipboard API は Navigator インターフェイスに読み取り専用の clipboard プロパティを追加し、クリップボードの内容を読み書きするために使用する Clipboard オブジェクトを返します。 Clipboard API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。
非同期のクリップボード読み書きメソッドを使用するには、ユーザーがウェブサイトやアプリにクリップボードへのアクセスを許可する必要があります。この許可は Permissions API から、 "clipboard-read" や "clipboard-write" の権限を取得する必要があります。
構文
theClipboard = navigator.clipboard;
値
システムのクリップボードにアクセスするために使用される Clipboard オブジェクトです。
例
以下のコードは、クリップボードの内容を読み取る目的でシステムのクリップボードにアクセスするため、 navigator.clipboard を使用します。
navigator.clipboard.readText().then(
clipText => document.querySelector(".cliptext").innerText = clipText);
このスニペットは、クラスが "cliptext" の要素の内容を、クリップボードのテキストコンテンツで置き換えます。おそらくこのコードは現在のクリップボードの内容を表示するブラウザー拡張機能に使用されているもので、定期的または特定のイベントが発火したときに自動的に更新されます。
クリップボードが空であるか、テキストが含まれていない場合、 "cliptext" の要素の内容はクリアされます。これは、クリップボードが空かテキストが含まれていない場合、 readText() が空文字列を返すからです。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Clipboard API and events navigator.clipboard の定義 |
草案 | 初回定義 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。