Copy to Clipboard
Champ en lecture seule et bouton Copier : coche verte et « Copié ! » si la copie passe, message visible et texte sélectionné si le navigateur la refuse.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au clic, le script copie la valeur du champ .cpb-input, ou le texte de data-cpb-text s'il est posé sur la racine : le champ peut alors montrer une clé masquée pendant que la vraie part dans le presse-papiers. Il passe d'abord par navigator.clipboard.writeText, disponible sur une page en https ou en localhost.
Si cette API manque (page en http) ou si le navigateur refuse, un repli copie avec document.execCommand('copy') par un champ caché, puis rend le focus là où il était. Si le repli échoue aussi, rien n'est caché : le vrai texte est mis dans le champ, sélectionné, et le message de data-cpb-fail s'affiche en ambre sous la ligne pour dire de copier au clavier.
Quand la copie réussit, le bouton prend un dégradé vert, l'icône copie cède la place à une coche qui rebondit (0,4 s) et le libellé devient data-cpb-done pendant data-cpb-reset millisecondes (2000 par défaut). La coche se pose à l'emplacement de l'icône : le bouton ne change pas de largeur. Le champ fait 260 px (--cpb-field-width), rétrécit sur un écran étroit et passe au-dessus du bouton s'il manque de place.
Chaque .fx-0739-root est une instance à part. L'événement fx0739:copy (detail.ok, detail.text) part de la racine à chaque essai et root.fx0739.copy() lance la copie depuis votre code.
Accessibilité
- Annonce : la zone
.cpb-msg(role="status") lit « Copié dans le presse-papiers » à la réussite, et le message d'échec quand la copie est refusée. Sans elle, un utilisateur de lecteur d'écran ne saurait pas si le clic a servi. - Champ nommé : le champ porte un
aria-label(« Commande à copier ») ; adaptez-le à ce qu'il contient. En lecture seule, il reste atteignable au clavier et sélectionnable à la main. - Clavier : vrai
<button>, Entrée et Espace ; anneau lavande au focus clavier sur le champ et le bouton. En cas d'échec, le focus va dans le champ, texte sélectionné, prêt pour Ctrl+C. - Contraste : texte blanc sur le dégradé indigo
#5a5df0 → #8453f5: 4,6 à 4,9:1 ; sur le vert de « Copié ! »,#0c855d → #036043: 4,6:1 et plus. Mesuré dans Chromium, Firefox et WebKit, au repos, au survol et après la copie. Si vous changez ces dégradés, gardez au moins 4,5:1 sur leur couleur la plus claire. - Mouvement réduit : plus de soulèvement au survol, de transition ni de rebond de la coche ; le changement de couleur et de libellé reste.
Compatibilité navigateur
JavaScript sans dépendance (3,7 Ko commentaires compris) et deux icônes SVG. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : code collé deux fois, chaque copie copie seule (texte relu dans le presse-papiers de Chromium), page sans API presse-papiers (repli réussi), copie entièrement refusée (message visible, texte sélectionné), clavier, toucher à 390 px, mouvement réduit, 0 erreur, aucun nom ajouté sur window.
navigator.clipboard.writeText existe depuis Chrome 66, Firefox 63 et Safari 13.1 ; avant, le repli execCommand('copy') (Chrome 42, Firefox 41, Safari 10) prend le relais. L'anneau de focus demande :focus-visible (Chrome 86, Firefox 85, Safari 15.4). Sans JavaScript, le bouton ne copie rien mais le champ reste sélectionnable.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0739-root" data-cpb-done="Copié !" data-cpb-said="Copié dans le presse-papiers" data-cpb-fail="Copie automatique refusée : le texte est sélectionné, copiez-le avec Ctrl+C (⌘+C sur Mac).">
<div class="cpb-demo">
<input type="text" class="cpb-input" value="npm run build" readonly aria-label="Commande à copier">
<button type="button" class="cpb-btn">
<svg class="cpb-copy-icon" aria-hidden="true">…</svg>
<svg class="cpb-check-icon" aria-hidden="true">…</svg>
<span class="cpb-text">Copier</span>
</button>
<p class="cpb-msg" role="status" aria-live="polite"></p>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Texte copié (HTML — data-cpb-text sur la racine) |
absent : la valeur du champ | Copie une autre valeur que celle affichée (clé masquée, lien complet derrière un libellé court). |
Libellé après copie (HTML — data-cpb-done) |
« Copié ! » | Remplace le texte du bouton pendant l'état copié. |
Annonce (HTML — data-cpb-said) |
« Copié dans le presse-papiers » | Phrase lue par les lecteurs d'écran ; précisez ce qui a été copié. |
Message d'échec (HTML — data-cpb-fail) |
« Copie automatique refusée : le texte est sélectionné… » | Affiché en ambre sous la ligne et annoncé quand toutes les copies ont échoué. |
Durée de l'état copié (HTML — data-cpb-reset) |
2000 ms | Temps avant le retour au libellé de départ. |
Taille (CSS — --cpb-font-size, --cpb-field-width) |
1rem · 260 px | La taille de police entraîne marges et icônes ; la largeur du champ se règle à part. |
Cadre (CSS — --cpb-height, --cpb-page, --cpb-panel, --cpb-pad) |
300 px · #0a0a0f · #1a1a2e · 20 px |
Mettez 0 et transparent pour poser champ et bouton dans votre propre carte. |
Code (JS — root.fx0739.copy(), événement fx0739:copy) |
— | Lance la copie ; l'événement dit si elle a réussi (detail.ok), par exemple pour vos statistiques. |
FAQ
navigator.clipboard qu'aux pages sûres (https ou localhost). En http, l'effet tente execCommand('copy'), qui marche encore presque partout après un clic ; sinon le texte est sélectionné et le message demande Ctrl+C. Passer le site en https règle la question.data-cpb-text est alors mise dans le champ et sélectionnée. Si elle ne doit jamais s'afficher, retirez ce comportement dans fail() et gardez seulement le message..fx-0739-root a son champ, son bouton, sa minuterie et son annonce. Le script peut même être collé deux fois sans double copie.
