Navigator.clipboard

Clipboard APINavigator インターフェイスに読み取り専用の clipboard プロパティを追加し、クリップボードの内容を読み書きするために使用する Clipboard オブジェクトを返します。 Clipboard API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。

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

構文

theClipboard = navigator.clipboard;

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

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

navigator.clipboard.readText().then(
  clipText => document.queryElementSelector(".cliptext").innerText = clipText);

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

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

仕様書

仕様書 状態 備考
Clipboard API and events
navigator.clipboard の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 66Edge ? Firefox 完全対応 63IE ? Opera ? Safari ? WebView Android 完全対応 66Chrome Android 完全対応 66Edge Mobile ? Firefox Android 完全対応 63Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,