Navigator: clipboard プロパティ
クリップボード API は Navigator
インターフェイスに読み取り専用の clipboard
プロパティを追加し、これはクリップボードの内容を読み書きするために使用する Clipboard
オブジェクトを返します。
クリップボード API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。
非同期のクリップボード読み書きメソッドを使用するには、ユーザーがウェブサイトやアプリにクリップボードへのアクセスを許可する必要があります。この許可は 権限 API から、 "clipboard-read"
や "clipboard-write"
の権限を取得する必要があります。
値
システムのクリップボードにアクセスするために使用される Clipboard
オブジェクトです。
例
以下のコードは、クリップボードの内容を読み取る目的でシステムのクリップボードにアクセスするため、 navigator.clipboard
を使用します。
navigator.clipboard
.readText()
.then(
(clipText) => (document.querySelector(".cliptext").innerText = clipText),
);
このスニペットは、クラスが "cliptext"
の要素の内容を、クリップボードのテキストコンテンツで置き換えます。おそらくこのコードは現在のクリップボードの内容を表示するブラウザー拡張機能に使用されているもので、定期的または特定のイベントが発生したときに自動的に更新されます。
クリップボードが空であるか、テキストが含まれていない場合、 "cliptext"
の要素の内容はクリアされます。これは、クリップボードが空かテキストが含まれていない場合、 readText()
が空文字列を返すからです。
仕様書
Specification |
---|
Clipboard API and events # navigator-clipboard |
ブラウザーの互換性
BCD tables only load in the browser