Gimmicks / Copy

In diesem Beispiel möchte ich zeigen, wie man einen Text aus einem Eingabefeld via JavaScript kopieren kann.
Ich schreibe in das Feld "Target".
Der kopierte Text, das kann man hier nur schlecht sehen, ist tatsächlich im Zwischenspeicher. 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

Target

Text kopieren

Code


HTML:

<div id="target">
	Target
</div>
<p>
	<input type="text" name="copytext" value="Hallo Welt">
	<br>
	<a class="center" href="javascript:copy()">Text kopieren</a>
</p>



CSS:

input[name='copytext']
{
	width:227px;
	height:15px;
	background-color:var(--white);
	color:var(--black) !important;
	margin-bottom: 0 !important;
}



JavaScript:

function copy(){
	const myInput = document.querySelector("input[name='copytext']");

	// Selektiere den Text
	myInput.select();
	myInput.setSelectionRange(0, 99999); // Für mobile Geräte

	// Kopiere den Text in deine Zwischenablage
	navigator.clipboard.writeText(myInput.value);

	// Schreibt den Text in das DIV "Target"
	document.getElementById('target').innerText = myInput.value;
	
}