So kopieren Sie Text in die Zwischenablage

Das Kopieren von Text in die Zwischenablage ist eine häufige Anforderung in modernen Webanwendungen. Obwohl es viele Standard-JavaScript-Lösungen gibt, verwenden wir heute Clipboard.js , eine schlanke Bibliothek, und Hint.css , eine einfache Tooltip-Bibliothek, um eine elegante Copy-to- Zwischenablagefunktion.

Schritt 1: HTML-Struktur

Der HTML-Code bleibt gleich. Es enthält einen mit Hint.css gestalteten Link, der einen Tooltip anzeigt, wenn Sie mit der Maus über das Kopiersymbol fahren.

<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 KOSTENLOS RESSOURCEN FÜR ENTWICKLER!! ❤️ ?? _{(täglich aktualisiert)}

1400 kostenlose HTML-Vorlagen

372 kostenlose Nachrichtenartikel

72 kostenlose KI-Eingabeaufforderungen

333 kostenlose Code-Bibliotheken

52 kostenlose Code-Snippets und Boilerplates für Node, Nuxt, Vue und mehr!

25 kostenlose Open-Source-Icon-Bibliotheken

Besuchen Sie dailysandbox.pro für kostenlosen Zugang zu einer Schatzkammer voller Ressourcen!

Erläuterung des Kodex

• Dadurch wird das Attribut data-clipboard-text dynamisch auf die gewünschte URL gesetzt.
• Text: Definiert eine Rückruffunktion, die den Wert des data-clipboard-text-Attributs für das angeklickte Element zurückgibt.
• Aktualisiert den Tooltip auf „Kopiert“, wenn die Aktion in der Zwischenablage erfolgreich ist.
• Setzt den Tooltip-Text nach 3 Sekunden auf „Link in die Zwischenablage kopieren“ zurück.

Umgang mit dem Erfolgsereignis :

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

Clipboard.js initialisieren :

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

Zwischenablagetext festlegen :

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

Vorteile dieses Ansatzes

1. Keine jQuery-Abhängigkeit: Durch die Verwendung von einfachem JavaScript ist die Lösung leichtgewichtig und mit modernen Webstandards kompatibel.
2. Hint.css-Integration: Bietet einen sauberen, optisch ansprechenden Tooltip ohne zusätzliches JavaScript.
3. Clipboard.js Einfachheit: Verarbeitet Zwischenablage-Interaktionen effizient, ohne dass eine benutzerdefinierte Logik erforderlich ist.

Abschluss

Mit nur wenigen Zeilen einfachem JavaScript und der Leistungsfähigkeit von Clipboard.js und Hint.css haben Sie eine saubere, benutzerfreundliche Funktion zum Kopieren in die Zwischenablage implementiert. Dieser Ansatz vermeidet unnötige Abhängigkeiten und behält gleichzeitig Funktionalität und Eleganz bei.

Jetzt probieren Sie es aus! Ihre Benutzer werden die Einfachheit und Reaktionsfähigkeit dieser Funktion zu schätzen wissen. ?

Weitere Tipps zur Webentwicklung finden Sie unter DailySandbox und abonnieren Sie unseren kostenlosen Newsletter, um immer auf dem Laufenden zu bleiben!

Das obige ist der detaillierte Inhalt vonSo kopieren Sie Text in die Zwischenablage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!