Comment copier du texte dans le presse-papiers

Copier du texte dans le presse-papiers est une exigence courante dans les applications Web modernes. Bien qu'il existe de nombreuses solutions JavaScript vanille, nous utiliserons aujourd'hui Clipboard.js , une bibliothèque légère, et Hint.css , une simple bibliothèque d'info-bulles, pour créer un élégant copier-coller. fonction presse-papiers.

---

Étape 1 : Structure HTML

Le HTML reste le même. Il comprend un lien stylisé avec Hint.css pour afficher une info-bulle lorsque vous survolez l'icône de copie.

<a href="#">



<ul>
<li>
<strong>class="hint hint-bottom"</strong> : Adds a bottom-aligned tooltip using Hint.css.</li>
<li>
<strong>data-hint="Copy link to clipboard"</strong> : The tooltip text.</li>
</ul>


<hr>

<h3>
  
  
  Step 2: JavaScript
</h3>

<p>Here’s the updated code in plain JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">// Select the clipboard control
const control = document.querySelector('.app-clipboard-link');

// Set the clipboard text
control.setAttribute('data-clipboard-text', 'https://google.com');

// Initialize Clipboard.js
const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

// Handle the success event
clipboard.on('success', (event) => {
    // Update the tooltip to show "Copied"
    control.setAttribute('data-hint', 'Copied');

    // Reset the tooltip after 3 seconds
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

---

2254 GRATUITS RESSOURCES POUR LES DÉVELOPPEURS !! ❤️ ?? _{(mis à jour quotidiennement)}

1400 modèles HTML gratuits

372 articles d'actualité gratuits

72 invites IA gratuites

333 bibliothèques de codes gratuites

52 extraits de code et passe-partout gratuits pour Node, Nuxt, Vue et plus !

25 bibliothèques d'icônes Open Source gratuites

Visitez dailysandbox.pro pour accéder gratuitement à un trésor de ressources !

---

Explication du Code

• Cela définit dynamiquement l'attribut data-clipboard-text sur l'URL souhaitée.
• text : définit une fonction de rappel qui renvoie la valeur de l'attribut data-clipboard-text pour l'élément cliqué.
• Mise à jour l'info-bulle sur "Copié" lorsque l'action du presse-papiers réussit.
• Réinitialise le texte de l'info-bulle sur "Copier le lien vers le presse-papiers" après 3 secondes.

Gérer l'événement de réussite :

clipboard.on('success', (event) => {
    control.setAttribute('data-hint', 'Copied');
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

Initialisation de Clipboard.js :

const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

Définition du texte du presse-papiers :

control.setAttribute('data-clipboard-text', 'https://google.com');

---

Avantages de cette approche

1. Pas de dépendance jQuery : En utilisant du JavaScript simple, la solution est légère et compatible avec les standards du Web modernes.
2. Intégration Hint.css : Fournit une info-bulle claire et visuellement attrayante sans JavaScript supplémentaire.
3. Simplicité de Clipboard.js : Gère efficacement les interactions avec le presse-papiers sans nécessiter de logique personnalisée.

---

Conclusion

Avec seulement quelques lignes de JavaScript simple et la puissance de Clipboard.js et Hint.css, vous avez implémenté une fonctionnalité de copie dans le presse-papiers propre et conviviale. Cette approche évite les dépendances inutiles tout en conservant fonctionnalité et élégance.

Maintenant, allez-y et essayez-le ! Vos utilisateurs apprécieront la simplicité et la réactivité de cette fonctionnalité. ?

Pour plus de conseils sur le développement Web, consultez DailySandbox et inscrivez-vous à notre newsletter gratuite pour garder une longueur d'avance !

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!