API Clipboard
Baseline 2024
Newly available
Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
L'API Clipboard (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'API Permissions : la permission clipboard-write
est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission clipboard-read
doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers.
Note : Cette API n'est pas disponible dans les Web Workers (elle n'est pas exposée via WorkerNavigator
).
Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via document.execCommand()
.
Accéder au presse-papier
Au lieu de créer un objet Clipboard
lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale Navigator.clipboard
:
navigator.clipboard
.readText()
.then(
(clipText) => (document.querySelector(".editor").innerText += clipText),
);
Ce bout de code analyse le texte à partir du presse-papiers et l'insère après le premier élément trouvé comportant la classe editor
. Puisque readText()
(sans oublier read()
) retournent une chaîne vide si le contenu du presse-papier n'est pas textuel, ce code est sécurisé.
Interfaces
Clipboard
Contexte sécurisé-
Fournit une interface pour la lecture et l'écriture de texte et de données sur le presse-papiers du système. La spécification s'y réfère avec le terme "Async Clipboard API".
ClipboardEvent
Contexte sécurisé-
Représente les évènements fournissant l'information relative à la modification du presse-papiers, qui peut être l'évènement
cut
,copy
oupaste
. La spécification s'y réfère avec le terme "Clipboard Event API". ClipboardItem
Contexte sécurisé-
Représente un format de terme unique utilisé pour lire ou écrire des données.
Spécifications
Specification |
---|
Clipboard API and events # clipboard-interface |
Clipboard API and events # clipboard-event-interfaces |
Clipboard API and events # clipboarditem |
Compatibilité des navigateurs
api.Clipboard
BCD tables only load in the browser
api.ClipboardEvent
BCD tables only load in the browser
api.ClipboardItem
BCD tables only load in the browser
Voir aussi
- Démonstration de l'API Async Clipboard sur Glitch (en anglais)
- Image support for Async Clipboard article Image support for Async Clipboard article (en anglais)
- API Permissions
- Utiliser l'API Permissions