Text aus Span Element kopieren?
Moin,
ich habe ein Span Element:
<span id="test">Hello World</span>
Nun möchte ich den Text per Button in die Zwischenablage kopieren. Ich dachte an an sowas:
<button id="copy" onclick="copy()">Copy</button>
<script>
function copy() {
var text = document.getElementById("test");
// . . .
}
</script>
Wie kann ich das denn genau ausbauen? Im Internet habe ich bisher nur Möglichkeiten für Textfelter o.Ä. gefunden.
MfG
4 Antworten
Hier mal ein Testcase, wie man es machen kann:
https://jsfiddle.net/g2c3u4zs/2/
HTML:
<span id="test">Hello World</span>
<button id="button">Text in Zwischenablage kopieren</button>
Javascript:
var textElement = document.getElementById("test");
document.getElementById("button").addEventListener("click", function(e) {
var inputElement = document.createElement("input");
inputElement.type="text";
inputElement.value = textElement.innerText;
document.body.insertBefore(inputElement, textElement);
inputElement.select();
inputElement.setSelectionRange(0, 99999);
document.execCommand("copy");
inputElement.remove();
});
Gruß
Die Variante von regex9 scheint eleganter und kürzer zu sein. Wenn du also nur Text aus einem sichtbaren Element kopieren willst, würde ich die bevorzugen.
Meine Variante mit einem temporären INPUT-Element lässt sich dagegen auch gut verwenden, wenn man nicht sichtbaren Text (bspw. aus einem data-Attribut) in die Zwischenablage kopieren will. Dort braucht man ein extra Element.
Angenommen, du hast ein span-Element mit der ID some-span:
const range = document.createRange();
range.selectNode(document.getElementById("some-span"));
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
selection.removeAllRanges();
Erst wird eine Range um das Element gezogen und diese dann der aktuellen Selektion zugefügt. Mit execCommand wird der Text in die Zwischenablage kopiert.
<button id="copy" onclick="copy()">Copy</button>
<input type="text" value="Hidden Text to Copy" id="myInput" style="display:none;">
<script>
function copy() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
document.execCommand("copy");
}
</script>
https://jsfiddle.net/c9tn1vup/1/
<!DOCTYPE html>
<html>
<body>
<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
<span type="text" value="Hello World" id="myInput">mytext</span>
<button onclick="myFunction()">Copy text</button>
<p>The document.execCommand() method is not supported in IE8 and earlier.</p>
<script>
function myFunction() {
let range = new Range();
range.selectNodeContents(myInput);
document.getSelection().addRange(range);
document.execCommand("copy");
alert("Copied the text: " + document.getSelection().toString());
}
</script>
</body>
</html>
Danke, auf dieser Seite war ich auch schon, allerdings ist da nicht korrekt bzw. funktioniert nicht. Ein Span Element kann man anscheinend nicht auswählen.