クリップボード API を使用してページ読み込み時にクリップボードのコンテンツを読み取る方法

ページの読み込み時にクリップボードのコンテンツを取得する方法

Web ブラウザにはクリップボードにアクセスするための API が用意されており、ページ上のコンテンツを取得できます。ユーザーの操作なしでロードできます。この機能は、テキスト フィールドの事前入力やクリップボード データの表示などのタスクに特に役立ちます。

クリップボード API の使用

クリップボード API (navigator.clipboard) は、 readText() というメソッド。名前が示すように、クリップボードから現在のテキスト コンテンツを読み取ることができます。

この API は、非同期/待機構文または Promise 構文の 2 つの方法で使用できます。

非同期/待機構文の場合:

<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>

許可リクエスト

この API では、ユーザーに権限リクエストのダイアログ ボックスが表示されることに注意してください。これにより、悪意のあるスクリプトがユーザーの同意なしにクリップボード データにアクセスできなくなります。

制限事項と回避策

クリップボード API は、バージョン 109 の Firefox では機能しません。 Firefox ユーザーをサポートする必要がある場合は、サードパーティのクリップボード ライブラリの使用を検討してください。

コンソールから API コードを実行するには、タイムアウトを使用し、Web サイト ウィンドウ内で素早くクリックします。

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

追加リソース

詳細と使用ガイドラインについては、次の Google 開発者ドキュメントを参照してください:

• [クリップボード API](https:/ /developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
• [仕様](https://w3c.github.io/clipboard-apis/)

以上がクリップボード API を使用してページ読み込み時にクリップボードのコンテンツを読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。