Comment lire le contenu du Presse-papiers lors du chargement de la page à l'aide de l'API du Presse-papiers ?

Comment récupérer le contenu du presse-papiers lors du chargement de la page

Les navigateurs Web fournissent une API pour accéder au presse-papiers, vous permettant de récupérer son contenu sur la page charger sans interaction de l’utilisateur. Cette fonctionnalité est particulièrement utile pour des tâches telles que le pré-remplissage de champs de texte ou l'affichage des données du presse-papiers.

Utilisation de l'API Clipboard

L'API Clipboard (navigator.clipboard) fournit un méthode appelée readText(). Comme son nom l'indique, elle vous permet de lire le contenu du texte actuel à partir du presse-papiers.

Vous pouvez utiliser cette API de deux manières : avec la syntaxe asynchrone/d'attente ou la syntaxe Promise.

Avec la syntaxe Async/Await :

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

Avec la syntaxe 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>

Demande d'autorisation

Il est important de noter que cette API propose à l'utilisateur une boîte de dialogue de demande d'autorisation. Cela garantit qu'aucun script malveillant ne peut accéder aux données du Presse-papiers sans le consentement de l'utilisateur.

Limitations et solutions de contournement

L'API Clipboard ne fonctionne pas dans Firefox à partir de la version 109. Si vous devez prendre en charge les utilisateurs de Firefox, vous pouvez envisager d'utiliser une bibliothèque de presse-papiers tierce.

Pour exécuter le code API à partir de la console, vous pouvez utiliser un délai d'attente et cliquer rapidement dans la fenêtre du site Web.

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

Ressources supplémentaires

Pour plus d'informations et des directives d'utilisation, reportez-vous à la documentation destinée aux développeurs Google suivante :

• [API Clipboard](https:/ /developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
• [Spec](https://w3c.github.io/clipboard-apis/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!