Javascript select() – einen Text selektieren

Automatisch zur Zwischenablage

Die Methode markiert – selektiert – den gesamten Text in einem input- oder textarea-Element und stellt ihn heraus (meist durch eine blaue Hintergrundfarbe) als ob der Benutzer ihn manuell mit der Maus ausgewählt hätte.

document.querySelector("#marktext").addEventListener("click", function() {
	document.querySelector("#simpletext").select();
});

document.execCommand('copy') kopiert den selektierten Inhalt in die Zwischenablage, den der Benutzer direkt übernehmen kann. Der Text im textarea- oder input-Feld wird vollständig markiert, so dass der Benutzer direkt z.B. Strg+C drücken oder mit Rechtsklick → Kopieren wählen kann.

Mobile Geräte können den selektierten Text direkt kopieren, Ausschneiden, Teilen oder übersetzen.

Select() und Text mit dem Clipboard-API direkt in den Zwischenspeicher des Users kopieren

Das war einst die Hauptaufgabe für die Javascript-Methode select: den Text einer Textarea oder Input-Felds mit execCommand() in das Clipboard – den Zwischenspeicher – zu kopieren. Die modernen Browser spielen da allerdings nicht mehr mit, sie lesen den Inhalt eines input- oder textarea-Feldes nicht ohne Weiteres und überschreiben nicht mir nichts dir nichts das Clipboard des Users.

Man stelle sich nur einmal vor, was ein Third-Party-Skript im Browser (z.B. ein AddOn) alles mit dem Inhalt eines Eingabefeldes anstellen könnte: z.B. Passwörter und andere sensible Daten auslesen.

execCommand() gilt heute als veraltet (deprecated), stattdessen haben wir das Clipboard-API und writeText.

Das Clipboard API ist die modernere Methode für den lesenden und schreibenden Zugriff auf die Zwischenablage, um Anwendungen zu ermöglichen, Text oder andere Datenformate zu schreiben und zu lesen.

<div class="msg"></div>
<textarea id="website">Lorem ipsum dolor sit amet,… </textarea>
<button data-copy="#website">copy</button>

Das Clipboard-Api wird nur auf Webseiten unterstützt, die mit HTTPS ausgeliefert werden. Der Benutzer muss die Aktion bewußt auslösen, z.B. wie hier durch den Button »copy«

const copytext = document.querySelector("#copytext");
copytext.addEventListener ("click", function () {
	const text = document.querySelector("#website").value;
	// nur zur Veranschaulichung:
	document.querySelector("#website").select();
	
	navigator.clipboard.writeText(text)
	.then(() => {
	  document.querySelector(".msg").innerHTML = "Text wurde kopiert";
	})
	.catch(err => {
	  console.error("Fehler beim Kopieren:", err);
	});
})

clipboard.writeText(text) und clipboard.readText(text)

• navigator.clipboard.readText() liest Text aus der Zwischenablage.
• navigator.clipboard.writeText() schreibt Text in die Zwischenablage.

async function copyText() {
	try {
		const text = document.getElementById('textToCopy').value;
		await navigator.clipboard.writeText(text);
		document.querySelector("#pasted").innerHTML = "Text wurde in die Zwischenablage kopiert";
	} catch (err) {
		console.error('Fehler beim Kopieren in die Zwischenablage:', err);
	}
}

async function pasteText() {
	try {
		const text = await navigator.clipboard.readText();
		document.getElementById('pastedText').innerText = text;
	} catch (err) {
		console.error('Fehler beim Lesen aus der Zwischenablage:', err);
	}
}