Gimmicks / Copy Text

In diesem Beispiel möchte ich zeigen, wie man einen Text aus Element via JavaScript in die Zwischenablage kopieren kann.
Ich kopiere den Text aus dem Feld "Target".
Der kopierte Text, befindet sich im Zwischenspeicher: navigator.clipboard. Um dies zu testen, könnt Ihr auch Word oder einen Texteditor öffnen und mit Tastenkombination "Strg+v" den Text aus dem Speicher einfügen.

Wenn Ihr Anregungen oder Kommentare zu der Kopierfunktion habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code
Beispiel
Der Toaster beschloss heute, Karriere als Philosoph zu machen. Leider verbrannte er bei jedem Gedanken das Frühstück. Die Marmelade war beleidigt und zog auf ein Croissant um. Der Kaffee lachte nur und wurde dabei kalt. Am Ende hatte niemand Antworten, aber alle waren knuspriger.


Code 

HTML:

<div id="target">
	Der Toaster beschloss heute, Karriere als Philosoph zu machen.
	Leider verbrannte er bei jedem Gedanken das Frühstück.
	Die Marmelade war beleidigt und zog auf ein Croissant um.
	Der Kaffee lachte nur und wurde dabei kalt.
	Am Ende hatte niemand Antworten, aber alle waren knuspriger.
</div>
<p>
	<button class="ancor_button" 
	onclick="copyCodeToClipBoard()">Copy Text</button>
</p>






CSS:

.ancor_button {
    width: auto;
    padding: 5px 5px;
    color: var(--black);
    background-color: var(--white);
    cursor: pointer;
}






JavaScript:

function copyCodeToClipBoard() {
	const content = document.getElementById('target').innerHTML;

	// Kopiere den Text in deine Zwischenablage
	navigator.clipboard.writeText(content)
	.then(() => {
		// Ausgabe wenn OK
		alert('Text wurde in das clipboard kopiert')
	})
	.catch(err => {
		// Ausgabe wenn ein Fehler aufgetreten
		alert('Es ist ein Fehler aufgetreten' + err);
	})
}