In diesem Artikel erfährst du, wie du Kopierfunktionalität mit JavaScript implementierst.
Methode 1: Einfachen JavaScript-Code verwenden
Wir können dieClipboard.writeText()oderClipboard.write()-Methode der Clipboard-API verwenden, um den Inhalt der Zwischenablage mit den angegebenen Daten zu überschreiben.
Beispiel
function myFunction() {
/* Textinhalt abrufen */
var copyText = document.getElementById("myInput");
/* Inhalt auswählen und kopieren */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Einstellungen für mobile Geräte */
/* Inhalt in Textbereich kopieren */
navigator.clipboard.writeText(copyText.value);
/* Kopierten Inhalt als Pop-up anzeigen */
alert("Der kopierte Text ist: " + copyText.value);
}
/* Textinhalt abrufen */
var copyText = document.getElementById("myInput");
/* Inhalt auswählen und kopieren */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Einstellungen für mobile Geräte */
/* Inhalt in Textbereich kopieren */
navigator.clipboard.writeText(copyText.value);
/* Kopierten Inhalt als Pop-up anzeigen */
alert("Der kopierte Text ist: " + copyText.value);
}
Selbst ausprobieren »
Nach Abschluss des Kopierens können Sie auf eine benutzerfreundlichere Weise benachrichtigen:
Beispiel
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Inhalt kopieren: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Zum Kopieren auf die Schaltfläche klicken";
}
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Inhalt kopieren: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Zum Kopieren auf die Schaltfläche klicken";
}
Selbst ausprobieren »
Methode 2: Verwendung der Drittanbieter-Bibliothek clipboard.js (empfohlen, hohe Kompatibilität)
-
Offizielle Website von clipboard.js:https://clipboardjs.com/
clipboard.js GitHub:https://github.com/zenorocha/clipboard.js
Wir können clipboard.js herunterladen und in das Projekt einbinden:
<script src="dist/clipboard.min.js.html"></script>
Natürlich ist ein noch einfacherer Weg, direkt eine inländische CDN-Bibliothek zu verwenden:
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
Beispiel
new ClipboardJS('#copyInput', {
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("Erfolgreich kopiert!!!");
e.clearSelection();
}).on('error', function(e) {
alert('Error!');
});
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("Erfolgreich kopiert!!!");
e.clearSelection();
}).on('error', function(e) {
alert('Error!');
});
Selbst ausprobieren »
clipboard.js Browser-Unterstützung
