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.

Clipboard API – Zwischenablage

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);
	}
}