Copy to clipboard
Ik heb dit gevonden om tekst te kunnen kopiëren
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
}
/* 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?
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
};
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;
};
Gewijzigd op 12/11/2019 07:10:51 door Rob Doemaarwat
browsers: chrome & ie
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>
<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>
Gewijzigd op 12/11/2019 07:21:34 door Jan R
Geef het element een hoogte van 1px en zet de opacity laag. Ik geloof dat dat (of iets in die richting) de "truc" is.
height: 1px;
opacity: 0.01;
Is hiervoor niet het hidden-type bij uitstek geschikt en bedoeld? Dit gebruik ik zelf veelvuldig en werkt prima.
Code (php)
1
<input type="hidden" id="myInput" value="doe je ding">