Copy to Clipboard

[Michael 2]

Hallo Profis, ich suche ein Tutorial oder eine Seite wo erklärt wird, wie man auf Knopfdruck etwas in den Zwischenspeicher kopiert (Copy to Clipboard) Zwar habe ich fertige Scripts gefunden, aber da ich nicht weiß was da passiert, traue ich mich nicht so etwas einzubauen. Wäre sehr freundlich wenn mir jemand hier auf den richtigen Weg helfen könnte. Danke Michael

[Camping_RIDER]

Aloha ;)

W3Schools hat da ein Tutorial, das sich auf die Methode execCommand von document bezieht.

Diese habe ich allerdings in den offiziellen Specs des DOM nicht gefunden. Es handelt sich also vermutlich um was nicht-standardisiertes, das trotzdem in den meisten (allen?) Browsern funktioniert.

Falls Fragen zu dem Tutorial / Codebeispiel bestehen, kann dir hier sicher geholfen werden.

Grüße,

RIDER

[Michael 2]

Vielen Dank fürs erste, das schaue ich mir an.

[JürgenB]

Hallo Michael,

ich habe mich vor einiger Zeit auch mit dem Thema beschäftigt und nichts brauchbares gefunden. Meine Lösung sieht jetzt so aus:

#clipboard { display: none; position:fixed; top:0; left:0; width:calc(100vw - 100px); height:100vh; z-index:10; background-color:rgba(1,1,1,0.5); padding:20px 50px }
#clipboard p { padding:10px }
#clipboard textarea { width:calc(100vw - 128px);height:calc(100vh - 100px - 2.5em) }

<div id="clipboard">
	<p>Bitte Inhalt mit Strg C bzw. cmd C in die Zwischenablage kopieren
		<br><textarea id="ta"></textarea>
		<br><button type="button" onclick="this.parentNode.parentNode.style.display='none'">Schließen</button>
	</p>
</div>

var copy2clipboard = function(text) {
	document.getElementById("clipboard").style.display = "block";
	var ta = document.getElementById("ta");
	ta.value = text;
	ta.focus();
	ta.select();
}

Gruß
Jürgen

[Michael 2]

Auch Dir vielen Dank!

[Michael 2]

Ich habe mir jetzt ein paar herangehensweisen angesehen.

Bei mir soll per PHP eine Tabelle ausgegeben werden und ich möchte in jeder Zeile einen Knopf, wo ich den Inhalt des Hidden Input in die Zwischenablage speichern kann. Mein Ergebnis sieht deshalb jetzt so aus:

<script>
function c2c(id) {
	//Hidden text auslesen
   	var c2c_id = "hidden_"+id;
    var textToClipboard = document.getElementById(c2c_id).value;
	//Temporäres Textfeld erzeugen und Wert aus Hidden text einfügen
	var tempTextfeld = document.createElement("input");
	tempTextfeld.style ="z-index:10; position:absolute; left:-200px; top:-200px;";
	tempTextfeld.value = textToClipboard;
	document.body.appendChild(tempTextfeld);
	// Text auswählen und in den Zwischenspeicher kopieren
	tempTextfeld.select();
	document.execCommand("copy");
	//temporäres Textfeld entfernen
	document.body.removeChild(tempTextfeld);
}
</script>




  Klartext 1<input type="hidden" id="hidden_1"  value="Hiddentext 1" /><button onclick="c2c(1)">c2c</button><br />
  Klartext 2<input type="hidden" id="hidden_2" value="Hiddentext 2" /><button onclick="c2c(2)">c2c</button><br />
  Klartext 3<input type="hidden" id="hidden_3" value="Hiddentext 3" /><button onclick="c2c(3)">c2c</button>

Falls jemand etwas auffällt, was man so nicht machen sollte, bin ich für Hinweise dankbar.

Grüße Michael 2

[Camping_RIDER]

Aloha ;)

Kann man so machen, denke ich. Ich bin nur über eine Sache gestolpert: Wozu überhaupt die hidden-input-Felder? Nur um das, was kopiert werden soll, vorzuhalten? Und in Klartext 1 steht eigentlich das selbe drin?

Mir fallen da auf Anhieb zwei Optimierungsmöglichkeiten ein, ob die sinnvoll sind in deinem konkreten Fall musst du selbst entscheiden.

Möglichkeit Nr. 1: Verzichte auf die Hidden-Felder und verwende in deinem Javascript stattdessen einfach direkt den Klartext, den du z.B. als nodeValue des Klartext bekommst. Eventuell kannst du den auch als span auszeichnen.

Möglichkeit Nr. 2: Interessant fänd ich auch die Möglichkeit, den Text direkt in input-Feldern vorzuhalten, diese aber visuell so zu stylen, dass sie nicht wie input-Felder aussehen sondern wie Fließtext. Dann würdest du dir im Javascript das erzeugen des Feldes sparen. Das kann z.B. so aussehen.

Nur so als Anregung zu verstehen, ob das eine oder andere wirklich vorteilhaft ist kann ich von hier nur schwer beurteilen.

Grüße,

RIDER