Copy output of a JavaScript variable to the clipboard

Question

I have no knowledge of JavaScript  but I managed to put this code together using bits and bolts from various Stack nbsp Overflow answers  It works OK  and it outputs an array of all selected checkboxes in a document via an alert box   function getSelectedCheckboxes chkboxName      var checkbx         var chkboxes   document getElementsByName chkboxName     var nr chkboxes   chkboxes length    for var i 0  i lt nr chkboxes  i          if chkboxes i  type     checkbox   amp  amp  chkboxes i  checked    true  checkbx push chkboxes i  value         return checkbx      And to call it I use    lt button id  btn test  type  button   gt Check lt  button gt   lt script gt      document getElementById  btn test   onclick   function             var checkedBoxes   getSelectedCheckboxes  my id            alert checkedBoxes          lt  script gt    Now I would like to modify it so when I click the btn test button the output array checkbx is copied to the clipboard  I tried adding   checkbx   document execCommand  copy      or  checkbx execCommand  copy      at the end of the function and then calling it like    lt button id  btn test  type  button  onclick  getSelectedCheckboxes  my id    gt Check lt  button gt    But it does not work  No data is copied to clipboard

User · Answer

I managed to copy text to the clipboard (without showing any text boxes) by adding a hidden input element to body, i.e.:

_x000D_

 function copy(txt){_x000D_
  var cb = document.getElementById("cb");_x000D_
  cb.value = txt;_x000D_
  cb.style.display='block';_x000D_
  cb.select();_x000D_
  document.execCommand('copy');_x000D_
  cb.style.display='none';_x000D_
 }

_x000D_

<button onclick="copy('Hello Clipboard!')"> copy </button>_x000D_
<input id="cb" type="text" hidden>

_x000D_

User · Answer

For general purposes of copying any text to the clipboard  I wrote the following function    function textToClipboard  text        var dummy   document createElement  textarea        document body appendChild dummy       dummy value   text      dummy select        document execCommand  copy        document body removeChild dummy       The value of the parameter is inserted into value of a newly created  lt textarea gt   which is then selected  its value is copied to the clipboard and then it gets removed from the document

User · Answer

OK  I found some time and followed the suggestion by Teemu and I was able to get exactly what I wanted   So here is the final code for anyone that might be interested  For clarification  this code gets all checked checkboxes of a certain ID  outputs them in an array  named here checkbx  and then copies their unique name to the clipboard   JavaScript function   function getSelectedCheckboxes chkboxName      var checkbx         var chkboxes   document getElementsByName chkboxName     var nr chkboxes   chkboxes length    for var i 0  i lt nr chkboxes  i          if chkboxes i  type     checkbox   amp  amp  chkboxes i  checked    true  checkbx push chkboxes i  value         checkbx toString          Create a dummy input to copy the string array inside it   var dummy   document createElement  input          Add it to the document   document body appendChild dummy         Set its ID   dummy setAttribute  id    dummy id          Output the array into it   document getElementById  dummy id   value checkbx        Select it   dummy select          Copy its contents   document execCommand  copy          Remove it as its not needed anymore   document body removeChild dummy       And its HTML call    lt button id  btn test  type  button  onclick  getSelectedCheckboxes  ID of chkbxs selected    gt Copy lt  button gt

User · Answer

Nowadays there is a new ish  API to do this directly  It works on modern browsers and on HTTPS  and localhost  only  Not supported by IE11  IE11 has its own API  And the workaround in the accepted answer can be used for unsecure hosts  function copyToClipboard  text      if  navigator clipboard       default  modern asynchronous API     return navigator clipboard writeText text       else if  window clipboardData  amp  amp  window clipboardData setData           for IE11     window clipboardData setData  Text   text       return Promise resolve        else          workaround  create dummy input     const input   h  input     type   text          input value   text      document body append input       input focus        input select        document execCommand  copy        input remove        return Promise resolve           Note  it uses Hyperscript to create the input element  but should be easy to adapt  There is no need to make the input invisible  as it is added and removed so fast  Also when hidden  even using some clever method  some browsers will detect it and prevent the copy operation

User · Answer

Very useful  I modified it to copy a JavaScript variable value to clipboard   function copyToClipboard val       var dummy   document createElement  input        dummy style display    none       document body appendChild dummy        dummy setAttribute  id    dummy id        document getElementById  dummy id   value val      dummy select        document execCommand  copy        document body removeChild dummy

User · Answer

When you need to copy a variable to the clipboard in the Chrome dev console  you can simply use the copy   command   https   developers google com web tools chrome-devtools console command-line-reference copyobject

User · Answer

function copyToClipboard text        var dummy   document createElement  textarea           to avoid breaking orgain page when copying more words        cant copy when adding below this code        dummy style display    none      document body appendChild dummy         Be careful if you use texarea  setAttribute  value   value   which works with  input  does not work with  textarea       Eduard     dummy value   text      dummy select        document execCommand  copy        document body removeChild dummy     copyToClipboard  hello world   copyToClipboard  hello nworld

User · Answer

At the time of writing  setting display none on the element didn t work for me  Setting the element s width and height to 0 did not work either  So the element has to be at least 1px in width for this to work   The following example worked in Chrome and Firefox       const str    Copy me       const el   document createElement  input           Does not work         dummy style display    none       el style height    0px          Does not work         el style width    0px       el style width    1px       document body appendChild el       el value   str      el select        document execCommand  copy        document body removeChild el     I d like to add that I can see why the browsers are trying to prevent this hackish approach  It s better to openly show the content you are going copy into the user s browser  But sometimes there are design requirements  we can t change

User · Answer

I just want to add  if someone wants to copy two different inputs to clipboard  I also used the technique of putting it to a variable then put the text of the variable from the two inputs into a text area   Note  the code below is from a user asking how to copy multiple user inputs into clipboard  I just fixed it to work correctly  So expect some old style like the use of var instead of let or const  I also recommend to use addEventListener for the button    x000D   x000D      function doCopy     x000D   x000D          try  x000D              var unique   document querySelectorAll   unique    x000D              var msg      x000D   x000D              unique forEach function  unique    x000D                  msg  unique value  x000D                  x000D   x000D              var temp  document createElement  textarea    x000D              var tempMsg   document createTextNode msg   x000D              temp appendChild tempMsg   x000D   x000D              document body appendChild temp   x000D              temp select    x000D              document execCommand  copy    x000D              document body removeChild temp   x000D              console log  Success    x000D   x000D   x000D            x000D          catch err    x000D   x000D              console log  There was an error copying    x000D            x000D        x000D   lt input type  text  class  unique  size  9  value  SESA   D-ID   readonly  gt  x000D   lt input type  text  class  unique  size  18  value    gt  x000D   lt button id  copybtn  onclick  doCopy    gt  Copy to clipboard  lt  button gt  x000D   x000D   x000D

[javascript] Copy output of a JavaScript variable to the clipboard

Examples related to javascript

Examples related to copy

Examples related to clipboard