Text in die Zwischenablage kopieren in JavaScript
-
Kopieren Sie Text in die Zwischenablage mit der Methode
Document.execCommand()in JavaScript -
Kopieren von Text in die Zwischenablage mit der
Clipboard APIin JavaScript
Heutzutage möchten viele Webentwickler auf ihren Websites eine Funktionalität implementieren, mit der ihre Benutzer mit nur einem Klick eine Reihe von Texten direkt von ihrer Website kopieren können. Einige der am häufigsten verwendeten Beispiele hierfür sind das Kopieren eines Terminalbefehls oder ganzer Codefragmente von einer technischen Website.
Mal sehen, was wir überhaupt mit einer Zwischenablage meinen und wie dieser gesamte Prozess überhaupt funktioniert. Danach werden wir diese Funktion zum Kopieren in die Zwischenablage in JavaScript implementieren.
Alles, was in unseren Computern vorhanden ist, wie Anwendungen, Bilder, Text, Dateien usw., wird als Daten bezeichnet. Wenn wir also versuchen, etwas zu kopieren, das in unserem Computer vorhanden ist, weist unser Computer unseren Daten, die wir kopiert haben, einen kleinen Teil des Speichers zu, um diese Daten in diesem Speicherplatz zu speichern. Dies wird als Zwischenablage bezeichnet. Auf diese Weise merkt sich der Computer die Informationen, die Sie kopiert haben. Nachdem wir die Daten im Speicher gespeichert haben, können wir diese Daten nehmen und dann einfügen oder so oft verwenden, wie wir möchten.
Theoretisch klingt es einfach, aber praktisch ist es schwierig zu implementieren, da es viele Komplexitäten gibt. Aber keine Sorge, mit JavaScript können wir dies mit Hilfe der Methode Document.execCommand() und der Clipboard API viel einfacher tun.
Kopieren Sie Text in die Zwischenablage mit der Methode Document.execCommand() in JavaScript
Dies ist die am häufigsten verwendete Methode zur Interaktion mit der Zwischenablage. Mit dieser Methode können Sie die folgenden 3 Vorgänge ausführen.
- Kopieren Sie den Text mit
Document.execCommand('copy')in die Zwischenablage. - Schneiden Sie Text aus und fügen Sie ihn mit
Document.execCommand('cut')in die Zwischenablage ein. - Fügen Sie den Inhalt, der bereits in der Zwischenablage vorhanden war, mit
Document.execCommand('paste')ein.
Beachten Sie, dass wir den Parameter übergeben müssen, für welche Operation wir ausführen möchten. In diesem Artikel konzentrieren wir uns nur auf den Kopiervorgang und nicht auf die anderen. Nehmen wir ein Beispiel und verstehen diesen Kopiervorgang.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert('Copied!');
}
Erstens haben wir die HTML-Datei mit einem textarea, der eine Zeichenkette und eine button enthält. Unser Ziel ist es, den im textarea vorhandenen Text zu kopieren, wenn wir auf die Schaltfläche Copy klicken. Zweitens haben wir eine JS-Datei, in der wir eine Funktion namens copyToClipBoard() haben. Diese Funktion ist für das Kopieren des Texts in die Zwischenablage verantwortlich.
Zunächst müssen wir den textarea mit document.getElementById in unserem DOM präsentieren und dieses Element in der Variablen content speichern. Jetzt haben wir den Inhalt des textarea in unserer Variablen content. Um den Text zu kopieren, müssen wir zuerst den gesamten Text mit der Methode select() auswählen. Dies ähnelt der Auswahl von Text mit der Maus.
Mit der Methode document.execCommand('copy') kopieren wir den ausgewählten Text und zeigen dem Benutzer eine Warnung an, um ihn darüber zu informieren, dass der Text in die Zwischenablage kopiert wurde.
Zuletzt müssen wir die Funktion copyToClipBoard() auf unserer Schaltfläche Copy als onClick-Ereignis aufrufen. Wenn Sie diese HTML-Seite in Ihrem Browser öffnen, werden die endgültigen Ergebnisse angezeigt.
Kopieren von Text in die Zwischenablage mit der Clipboard API in JavaScript
Die Clipboard-API bietet asynchrone Lese- und Schreibvorgänge, mit denen Sie Inhalte in und aus der Zwischenablage kopieren und einfügen können. Die Zwischenablage-API ist im Objekt navigator.clipboard verfügbar.
Diese API ist eine neue Ergänzung der JavaScript-Sprache, und nicht alle Browser können sie unterstützen, insbesondere die alten. Wenn Sie überprüfen möchten, ob Ihr Browser diese API unterstützt oder nicht, können Sie den folgenden Code verwenden.
if (!navigator.clipboard) {
// Clipboard API not available
return
}
Mal sehen, wie man die Clipboard-API verwendet, um Text in die Zwischenablage zu kopieren.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClickBoard() {
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {console.log('Text copied to clipboard...')})
.catch(err => {
console.log('Something went wrong', err);
})
}
Der obige Code ähnelt fast dem Code, den wir zuvor gesehen haben. Der einzige Unterschied besteht darin, dass wir die Funktion copyToClickBoard() geändert haben. Diese Methode wird aufgerufen, wenn wir auf die Schaltfläche Copy klicken. Innerhalb dieser Funktion erhalten wir zuerst den im textarea vorhandenen Text mithilfe der Eigenschaft innerHTML und speichern diesen Text in der Variablen content.
Das Objekt navigator.clipboard verfügt über zwei Methoden. Eine ist die Methode writeText(), mit der der Text in die Zwischenablage kopiert wird, und eine andere Methode ist die Methode readText(), mit der der in der Zwischenablage vorhandene Text gelesen und eingefügt wird. Hier geht es nur um die Methode writeText().
Innerhalb dieser Methode müssen wir die Variable content übergeben, die derzeit den gesamten Text im Zeichenkettenformat enthält. Danach nimmt diese Methode den Text und kopiert ihn in die Zwischenablage. Wenn dies erfolgreich ist, wird die Meldung In die Zwischenablage kopierter Text ... angezeigt. Andernfalls wird je nach Art des aufgetretenen Fehlers eine Fehlermeldung ausgegeben.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn