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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
clipboardChrome 完全対応 66Edge ? Firefox 完全対応 63IE ? Opera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 66Chrome Android 完全対応 66Firefox Android 完全対応 63Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

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