Navigator: clipboard プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

クリップボード API は Navigator インターフェイスに読み取り専用の clipboard プロパティを追加し、これはクリップボードの内容を読み書きするために使用する Clipboard オブジェクトを返します。

クリップボード API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。

非同期のクリップボード読み書きメソッドを使用するには、ユーザーがウェブサイトやアプリにクリップボードへのアクセスを許可する必要があります。この許可は 権限 API から、 "clipboard-read" や "clipboard-write" の権限を取得する必要があります。

値

システムのクリップボードにアクセスするために使用される Clipboard オブジェクトです。

例

以下のコードは、クリップボードの内容を読み取る目的でシステムのクリップボードにアクセスするため、 navigator.clipboard を使用します。

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

このスニペットは、クラスが "cliptext" の要素の内容を、クリップボードのテキストコンテンツで置き換えます。おそらくこのコードは現在のクリップボードの内容を表示するブラウザー拡張機能に使用されているもので、定期的または特定のイベントが発生したときに自動的に更新されます。

クリップボードが空であるか、テキストが含まれていない場合、 "cliptext" の要素の内容はクリアされます。これは、クリップボードが空かテキストが含まれていない場合、 readText() が空文字列を返すからです。

仕様書

Specification
Clipboard API and events
# navigator-clipboard

ブラウザーの互換性