Clipboard API

HTML / CSS 🟡 Mid

Definition

API asynchrone navigator.clipboard qui permet de lire et écrire dans le presse-papiers de manière sécurisée. Remplace le vieux document.execCommand('copy') avec gestion des permissions.

Analogie

Comme un presse-papiers sécurisé de bureau : on peut copier et coller, mais avec l'autorisation du propriétaire.

Exemple de code

// Copier du texte
await navigator.clipboard.writeText('Copié !');
// Lire le presse-papiers
const text = await navigator.clipboard.readText();
// Copier une image
const blob = await fetch(url).then(r => r.blob());
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);

Cas d'usage

Bouton 'Copier le code' dans une documentation ou un snippet de code.

Termes lies

#interview