How to copy text from a div to clipboard

Question

Here is my code for when the user clicks on this button    lt button id  button1  gt Click to copy lt  button gt    How do I copy the text inside this div    lt div id  div1  gt Text To Copy lt  div gt

User · Answer

The accepted answer does not work when you have multiple items to copy, and each with a separate "copy to clipboard" button. After clicking one button, the others will not work.

To make them work, I added some code to the accepted answer's function to clear text selections before doing a new one:

function CopyToClipboard(containerid) {
    if (window.getSelection) {
        if (window.getSelection().empty) { // Chrome
            window.getSelection().empty();
        } else if (window.getSelection().removeAllRanges) { // Firefox
            window.getSelection().removeAllRanges();
        }
    } else if (document.selection) { // IE?
        document.selection.empty();
    }

    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select().createTextRange();
        document.execCommand("copy");
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
        document.execCommand("copy");
    }
}

User · Answer

I was getting selectNode   param 1 is not of type node error   changed the code to this and its working   for chrome    x000D   x000D  function copy data containerid    x000D    var range   document createRange    x000D    range selectNode containerid     changed here x000D    window getSelection   removeAllRanges     x000D    window getSelection   addRange range    x000D    document execCommand  copy    x000D    window getSelection   removeAllRanges    x000D    alert  data copied    x000D    x000D   lt div id  select txt  gt This will be copied to clipboard  lt  div gt  x000D   lt button type  button  onclick  copy data select txt   gt copy lt  button gt  x000D   lt br gt  x000D   lt hr gt  x000D   lt p gt Try paste it here after copying lt  p gt  x000D   lt textarea gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

Made a modification to the solutions  so it will work with multiple divs based on class instead of specific IDs  For example  if you have multiple blocks of code  This assumes that the div class is set to  code     lt script gt             document   ready function                     code   click function event                   var range   document createRange                    range selectNode this                   window getSelection   removeAllRanges       clear current selection                 window getSelection   addRange range      to select text                 document execCommand  copy                    window getSelection   removeAllRanges      to deselect                                  lt  script gt

User · Answer

Create a  element to be appended to the document  Set its value to the string that we want to copy to the clipboard  Append said  element to the current HTML document  Use HTMLInputElement select   to select the contents of the  element  Use Document execCommand  copy   to copy the contents of the  to the clipboard  Remove the  element from the document  function copyToClipboard containertext        var el   document createElement  textarea        el value   containertext      el text   containertext      el setAttribute  id    copyText        el setAttribute  readonly            el style position    absolute       el style left    -9999px       document body appendChild el       var coptTextArea   document getElementById  copyText            copyText   text containertext       coptTextArea select        document execCommand  copy        document body removeChild el          Alert the copied text        alert  Copied     containertext  1000

User · Answer

Adding the link as an Answer to draw more attention to Aaron Lavers  comment below the first answer   This works like a charm -  http   clipboardjs com  Just add the clipboard js or min file  While initiating  use the class which has the html component to be clicked and just pass the id of the component with the content to be copied  to the click element

User · Answer

This solution add the deselection of the text after the copy to the clipboard   function copyDivToClipboard elem        var range   document createRange        range selectNode document getElementById elem        window getSelection   removeAllRanges        window getSelection   addRange range       document execCommand  copy        window getSelection   removeAllRanges

User · Answer

I tried the solution proposed above  But it was not cross-browser enough  I really needed ie11 to work   After trying I got to        lt html gt           lt body gt               lt div id  a  onclick  copyDivToClipboard    gt  Click to copy  lt  div gt               lt script gt                  function copyDivToClipboard                         var range   document createRange                        range selectNode document getElementById  a                         window getSelection   removeAllRanges       clear current selection                     window getSelection   addRange range      to select text                     document execCommand  copy                        window getSelection   removeAllRanges      to deselect                                lt  script gt           lt  body gt       lt  html gt    Tested with firefox 64  Chrome 71  Opera 57  ie11 11 472 17134 0   edge  EdgeHTML 17 17134   Update March 27th  2019   For some reason document createRange   didn t work before with ie11  But now properly  returns a Range object   So is better to use that  rather than document getSelection   getRangeAt 0

User · Answer

lt div id  myInputF2  gt  YES ITS DIV TEXT TO COPY   lt  div gt    lt script gt       function myFunctionF2              str   document getElementById  myInputF2   innerHTML          const el   document createElement  textarea            el value   str          document body appendChild el           el select            document execCommand  copy            document body removeChild el           alert  Copied the text     el value           lt  script gt   more info  https   hackernoon com copying-text-to-clipboard-with-javascript-df4d4988697f

User · Answer

Both examples work like a charm      JAVASCRIPT    x000D   x000D  function CopyToClipboard containerid    x000D    if  document selection    x000D      var range   document body createTextRange    x000D      range moveToElementText document getElementById containerid    x000D      range select   createTextRange    x000D      document execCommand  copy    x000D      else if  window getSelection    x000D      var range   document createRange    x000D      range selectNode document getElementById containerid    x000D      window getSelection   addRange range   x000D      document execCommand  copy    x000D      alert  Text has been copied  now paste in the text-area   x000D      x000D    x000D   lt button id  button1  onclick  CopyToClipboard  div1    gt Click to copy lt  button gt  x000D   lt br   gt  lt br   gt  x000D   lt div id  div1  gt Text To Copy  lt  div gt  x000D   lt br   gt  x000D   lt textarea placeholder  Press ctrl v to Paste the copied text  rows  5  cols  20  gt  lt  textarea gt  x000D   x000D   x000D   JQUERY  relies on Adobe Flash    https   paulund co uk jquery-copy-to-clipboard

User · Answer

Non of all these ones worked for me  But I found a duplicate of the question which the anaswer worked for me    Here is the link  How do I copy to the clipboard in JavaScript

[javascript] How to copy text from a div to clipboard

Examples related to javascript

Examples related to jquery