Maison >interface Web >js tutoriel >Comment récupérer le contenu du Presse-papiers avec l'API JavaScript Clipboard ?

Comment récupérer le contenu du Presse-papiers avec l'API JavaScript Clipboard ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-27 11:16:291101parcourir

How to Retrieve Clipboard Content with the JavaScript Clipboard API?

Récupération du presse-papiers en JavaScript

Détecter le contenu du presse-papiers et le coller automatiquement dans un champ de texte est une tâche courante dans les applications JavaScript. Ce guide présente une solution utilisant l'API Clipboard moderne.

Solution

Pour récupérer le contenu du presse-papiers, utilisez la méthode navigator.clipboard.readText(). Cette API est prise en charge dans la plupart des navigateurs modernes, à l'exception de Firefox 109 et versions ultérieures. La syntaxe pour async/await est la suivante :

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

Pour la syntaxe Promise, utilisez :

<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

Notez que la méthode readText() nécessite l'autorisation de l'utilisateur. Les utilisateurs verront une boîte de dialogue demandant l'autorisation d'accéder à leur presse-papiers. Assurez-vous que votre application gère cette demande d'autorisation de manière appropriée.

Exécution de la console

Cette solution ne fonctionnera pas si elle est appelée directement depuis la console. Vous pouvez définir un délai d'attente pour exécuter le code une fois qu'une fenêtre de navigateur est active :

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

Ressources supplémentaires

Pour plus de détails sur l'API Clipboard, reportez-vous au ressources suivantes :

  • [Google Developer Docs](https://developers.google.com/web/updates/2018/03/clipboardapi)
  • [MDN Web Docs]( https://developer.mozilla.org/en-US/docs/Web/API/Clipboard)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn