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!