JavaScript クリップボード API を使用してクリップボードのコンテンツを取得するにはどうすればよいですか?

JavaScript でのクリップボードの取得

クリップボードの内容を検出し、それをテキスト フィールドに自動的に貼り付けることは、JavaScript アプリケーションの一般的なタスクです。このガイドでは、最新のクリップボード API を使用したソリューションを説明します。

ソリューション

クリップボードのコンテンツを取得するには、navigator.clipboard.readText() メソッドを使用します。この API は、Firefox 109 以降を除く、ほとんどの最新ブラウザでサポートされています。 async/await の構文は次のとおりです。

<code class="javascript">const text = await navigator.clipboard.readText();</code>

Promise 構文の場合は、次を使用します。

<code class="javascript">navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });</code>

Permission Request

readText() メソッドにはユーザーの許可が必要です。ユーザーには、クリップボードへのアクセス許可を求めるダイアログ ボックスが表示されます。アプリケーションがこの権限リクエストを適切に処理していることを確認してください。

コンソール実行

このソリューションは、コンソールから直接呼び出された場合には機能しません。ブラウザ ウィンドウがアクティブになったときにコードを実行するタイムアウトを設定できます。

<code class="javascript">setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);</code>

追加リソース

クリップボード API の詳細については、次のリソース:

• [Google 開発者ドキュメント](https://developers.google.com/web/updates/2018/03/clipboardapi)
• [MDN Web ドキュメント]( https://developer.mozilla.org/en-US/docs/Web/API/Clipboard)

以上がJavaScript クリップボード API を使用してクリップボードのコンテンツを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。