function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
Echter als ik het element onzichtbaar maar (display:none;) werkt het kopiëren niet meer.
Weet iemand hoe dit kan?
"Computer says no". Geen idee. Of een beveiligingsdingetje ("alleen zichtbare elementen mogen gekopieerd worden"), of gewoon praktisch. Ipv display: none kun je 'm buiten beeld positioneren of transparant maken.
Je kunt ook van een willekeurig element kopiëren (dus ook eentje die nog niet eens in de DOM zit, en dus zeker weten niet zichtbaar is), en dan werkt het altijd:
function copyStr(str){
var result = false,node = document.createTextNode(str),range = document.createRange(),selection = window.getSelection();
try{
document.body.appendChild(node);
selection.removeAllRanges();
range.selectNodeContents(node);
selection.addRange(range);
result = document.execCommand('copy');
document.body.removeChild(node);
}
catch(e){
console.error(e);
}
return result;
};
Let op: dit (beide oplossingen) moet wel altijd als gevolg van een gebruikersactie (dus de gebruiker moet eerst ergens op klikken, en dan pas kun je via execCommand('copy') kopiëren - binnen een bepaalde periode).
<doctype! html>
<html>
<head>
<title>Copy tekst</title>
<script>
function kopy() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
</head>
<body>
<input style="display:none;" id="myInput" value="een beetje tekst">
<input type="button" onclick="kopy();" value="klembord">
</body>
</html>
