Copy to clipboard

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Loek Lemmens

Loek Lemmens

12/11/2019 01:47:43
Quote Anchor link
Hallo,

Ik heb dit gevonden om tekst te kunnen kopiëren
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
}


Echter als ik het element onzichtbaar maar (display:none;) werkt het kopiëren niet meer.
Weet iemand hoe dit kan?
 
PHP hulp

PHP hulp

07/12/2019 14:51:26
 
Rob Doemaarwat

Rob Doemaarwat

12/11/2019 07:10:12
Quote Anchor link
"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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
  };
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).
Gewijzigd op 12/11/2019 07:10:51 door Rob Doemaarwat
 
Jan R

Jan R

12/11/2019 07:20:30
Quote Anchor link
Bij mij lukt het wel
browsers: chrome & ie
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
Gewijzigd op 12/11/2019 07:21:34 door Jan R
 
Ozzie PHP

Ozzie PHP

12/11/2019 10:50:59
Quote Anchor link
>> Echter als ik het element onzichtbaar maar (display:none;) werkt het kopiëren niet meer.

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;
 
Verwijderd 31683

Verwijderd 31683

12/11/2019 16:26:57
Quote Anchor link
Uhm.

Is hiervoor niet het hidden-type bij uitstek geschikt en bedoeld? Dit gebruik ik zelf veelvuldig en werkt prima.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<input type="hidden" id="myInput" value="doe je ding">
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.