(Javascript) Text bei Klick auf Button in Zwischenablage kopieren?

Hallo, ich bastle mir gerade eine Seite zusammen und stehe nun vor einem Problem, wo selbst Google nicht helfen konnte, und zwar:

Wenn ich auf einen Button klicke, soll ein für den Leser unsichtbarer Text automatisch in die Zwischenablage kopiert werden.

Beispielsweise steht auf dem Button "2+2=" und wenn ich auf den Knopf klicke, ist automatisch die Ziffer "4" in der Zwischenablage.

Bin über jede Hilfe dankbar! :)

Answer 1

[tavkomann]

Ich weiß nicht, ob es eine sauberere Lösung gibt, aber mir ist spontan dieser Workaround mit recht guter Browser-Unterstützung eingefallen:

Du verwendest ein Textfeld...

<input type="text" id="val" value="4" />

..., welches du jedoch unsichtbar machst – aber so, dass das System den Text noch auswählen kann:

#val {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

Anschließend wird die Zahl ausgewählt und in die Zwischenablage kopiert:

document.getElementById('val').select();
document.execCommand('Copy');

Live-Beispiel: https://jsfiddle.net/s0bn1zn0/

Comments

[ChemieChemieYa]

Genau so. Erstmal Dankeschön für deine Antwort!

Problem ist nur... ich erstelle die Seite in einem HTML-Editor. Wie kann ich HTML, Javascript und CSS in einen einzigen Code zusammen?

[tavkomann]

@ChemieChemieYa

Das kann man natürlich auch direkt im HTML-Dokument machen, wobei ich das nicht empfehlen würde: https://jsfiddle.net/ckvethhe/

Answer 2

[AbbathFangirl]

Hier findest du den Codeauszug, mit dem man Text in die Zwischenablage bringt:

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

Oder meintest du, wie der Text auf dem Button ausgelesen und die Formel dann automatisch berechnet wird?

Comments

[ChemieChemieYa]

Das hatte ich auch schon gefunden. Mir geht es nur darum, dass dieser Text in der Textbox nicht sichtbar ist bzw. sichtbar sein soll. Einzig beim Klick auf den Knopf wird ein vordefinierter Text in die Zwischenablage kopiert.

[AbbathFangirl]

@ChemieChemieYa

Du kannst ja den Text in ein nicht sichtbares <div> o. ä. packen und darauf dann die Copy-Funktion rufen.

[Erzesel]

@ChemieChemieYa

bezogen auf obige Demo...

...
<input style="visibility: hidden" type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
...