Click button copy to clipboard using jQuery

Question

How do I copy the text inside a div to the clipboard  I have a div and need to add a link which will add the text to the clipboard  Is there a solution for this     lt p class  content  gt Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s lt  p gt    lt a class  copy-text  gt copy Text lt  a gt    After I click copy text  then I press Ctrl   V  it must be pasted

User · Answer

Most of the proposed answers create an extra temporary hidden input element(s). Because most browsers nowadays support div content edit, I propose a solution that does not create hidden element(s), preserve text formatting and use pure JavaScript or jQuery library.

Here is a minimalist skeleton implementation using the fewest lines of codes I could think of:

_x000D_

//Pure javascript implementation:_x000D_
document.getElementById("copyUsingPureJS").addEventListener("click", function() {_x000D_
  copyUsingPureJS(document.getElementById("copyTarget"));_x000D_
  alert("Text Copied to Clipboard Using Pure Javascript");_x000D_
});_x000D_
_x000D_
function copyUsingPureJS(element_id) {_x000D_
  element_id.setAttribute("contentEditable", true);_x000D_
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");_x000D_
  element_id.focus();_x000D_
  document.execCommand("copy");_x000D_
  element_id.removeAttribute("contentEditable");_x000D_
  _x000D_
}_x000D_
_x000D_
//Jquery:_x000D_
$(document).ready(function() {_x000D_
  $("#copyUsingJquery").click(function() {_x000D_
    copyUsingJquery("#copyTarget");_x000D_
  });_x000D_
 _x000D_
_x000D_
  function copyUsingJquery(element_id) {_x000D_
    $(element_id).attr("contenteditable", true)_x000D_
      .select()_x000D_
      .on("focus", function() {_x000D_
        document.execCommand('selectAll', false, null)_x000D_
      })_x000D_
      .focus()_x000D_
    document.execCommand("Copy");_x000D_
    $(element_id).removeAttr("contenteditable");_x000D_
     alert("Text Copied to Clipboard Using jQuery");_x000D_
  }_x000D_
});

_x000D_

#copyTarget {_x000D_
  width: 400px;_x000D_
  height: 400px;_x000D_
  border: 1px groove gray;_x000D_
  color: navy;_x000D_
  text-align: center;_x000D_
  box-shadow: 0 4px 8px 0 gray;_x000D_
}_x000D_
_x000D_
#copyTarget h1 {_x000D_
  color: blue;_x000D_
}_x000D_
_x000D_
#copyTarget h2 {_x000D_
  color: red;_x000D_
}_x000D_
_x000D_
#copyTarget h3 {_x000D_
  color: green;_x000D_
}_x000D_
_x000D_
#copyTarget h4 {_x000D_
  color: cyan;_x000D_
}_x000D_
_x000D_
#copyTarget h5 {_x000D_
  color: brown;_x000D_
}_x000D_
_x000D_
#copyTarget h6 {_x000D_
  color: teal;_x000D_
}_x000D_
_x000D_
#pasteTarget {_x000D_
  width: 400px;_x000D_
  height: 400px;_x000D_
  border: 1px inset skyblue;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="copyTarget">_x000D_
  <h1>Heading 1</h1>_x000D_
  <h2>Heading 2</h2>_x000D_
  <h3>Heading 3</h3>_x000D_
  <h4>Heading 4</h4>_x000D_
  <h5>Heading 5</h5>_x000D_
  <h6>Heading 6</h6>_x000D_
  <strong>Preserve <em>formatting</em></strong>_x000D_
  <br/>_x000D_
</div>_x000D_
_x000D_
<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>_x000D_
<button id="copyUsingJquery">Copy Using jQuery</button>_x000D_
<br><br> Paste Here to See Result_x000D_
<div id="pasteTarget" contenteditable="true"></div>

_x000D_

User · Answer

It is a simplest method to copy the content    lt div id  content  gt  Lorepm ispum  lt  div gt    lt button class  copy  title  content  gt Copy Sorce lt  button gt   function SelectContent element                            var doc   document                               text   doc getElementById element                                range  selection                                                       if  doc body createTextRange                                range   document body createTextRange                                range moveToElementText text                               range select                              else if  window getSelection                                selection   window getSelection                                        range   document createRange                                range selectNodeContents text                               selection removeAllRanges                                selection addRange range                                                       document execCommand  Copy                                                  copy   click function                              SelectContent    this  attr  title

User · Answer

html code here       lt input id  result  style  width 300px   gt some example text      lt button onclick  copyToClipboard  result    gt Copy P1 lt  button gt       lt input type  text  style  width 400px  placeholder  Paste here for test    gt    JS CODE        function copyToClipboard elementId                              Create a  hidden  input                       var aux   document createElement  input                           aux setAttribute  value   document getElementById elementId  value                            Append it to the body                       document body appendChild aux                            Highlight its content                       aux select                             Copy the highlighted text                       document execCommand  copy                             Remove it from the body                       document body removeChild aux

User · Answer

you can just using this lib for easy realize the copy goal   https   clipboardjs com      Copying text to the clipboard shouldn t be hard  It shouldn t require   dozens of steps to configure or hundreds of KBs to load  But most of   all  it shouldn t depend on Flash or any bloated framework       That s why clipboard js exists    or  https   github com zeroclipboard zeroclipboard  http   zeroclipboard org      The ZeroClipboard library provides an easy way to copy text to the   clipboard using an invisible Adobe Flash movie and a JavaScript   interface

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt  lt  title gt       lt link href  css index css  rel  stylesheet    gt       lt script src  js jquery-2 1 4 min js  gt  lt  script gt       lt script gt          function copy                         try                                   txt   select                    document execCommand  copy                              catch e                                alert e                                lt  script gt   lt  head gt   lt body gt       lt h4 align  center  gt Copy your code lt  h4 gt       lt textarea id  txt  style  width 100  height 300px   gt  lt  textarea gt       lt br   gt  lt br   gt  lt br   gt       lt div align  center  gt  lt span class  btn-md  onclick  copy     gt copy lt  span gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

Edit as of 2016  As of 2016  you can now copy text to the clipboard in most browsers because most browsers have the ability to programmatically copy a selection of text to the clipboard using document execCommand  copy   that works off a selection   As with some other actions in a browser  like opening a new window   the copy to clipboard can only be done via a specific user action  like a mouse click    For example  it cannot be done via a timer   Here s a code example    x000D   x000D  document getElementById  copyButton   addEventListener  click   function     x000D      copyToClipboard document getElementById  copyTarget     x000D      x000D   x000D  function copyToClipboard elem    x000D        create hidden text element  if it doesn t already exist x000D      var targetId     hiddenCopyText    x000D      var isInput   elem tagName      INPUT     elem tagName      TEXTAREA   x000D      var origSelectionStart  origSelectionEnd  x000D      if  isInput    x000D             can just use the original source element for the selection and copy x000D          target   elem  x000D          origSelectionStart   elem selectionStart  x000D          origSelectionEnd   elem selectionEnd  x000D        else   x000D             must use a temporary form element for the selection and copy x000D          target   document getElementById targetId   x000D          if   target    x000D              var target   document createElement  textarea    x000D              target style position    absolute   x000D              target style left    -9999px   x000D              target style top    0   x000D              target id   targetId  x000D              document body appendChild target   x000D            x000D          target textContent   elem textContent  x000D        x000D         select the content x000D      var currentFocus   document activeElement  x000D      target focus    x000D      target setSelectionRange 0  target value length   x000D       x000D         copy the selection x000D      var succeed  x000D      try   x000D         succeed   document execCommand  copy    x000D        catch e    x000D          succeed   false  x000D        x000D         restore original focus x000D      if  currentFocus  amp  amp  typeof currentFocus focus      function     x000D          currentFocus focus    x000D        x000D       x000D      if  isInput    x000D             restore prior selection x000D          elem setSelectionRange origSelectionStart  origSelectionEnd   x000D        else   x000D             clear temporary content x000D          target textContent       x000D        x000D      return succeed  x000D    x000D  input   x000D    width  400px  x000D    x000D   lt input type  text  id  copyTarget  value  Text to Copy  gt   lt button id  copyButton  gt Copy lt  button gt  lt br gt  lt br gt  x000D   lt input type  text  placeholder  Click here and press Ctrl-V to see clipboard contents  gt  x000D   x000D   x000D      Here s a little more advanced demo  https   jsfiddle net jfriend00 v9g1x0o6   And  you can also get a pre-built library that does this for you with clipboard js     Old  historical part of answer  Directly copying to the clipboard via JavaScript is not permitted by any modern browser for security reasons  The most common workaround is to use a Flash capability for copying to the clipboard that can only be triggered by a direct user click   As mentioned already  ZeroClipboard is a popular set of code for managing the Flash object to do the copy  I ve used it  If Flash is installed on the browsing device  which rules out mobile or tablet   it works     The next most common work-around is to just place the clipboard-bound text into an input field  move the focus to that field and advise the user to press Ctrl   C to copy the text   Other discussions of the issue and possible work-arounds can be found in these prior Stack Overflow posts    How do I copy to the clipboard in JavaScript  How to copy text to the client  39 s clipboard using jQuery  How can you copy to clipboard without Flash      These questions asking for a modern alternative to using Flash have received lots of question upvotes and no answers with a solution  probably because none exist     HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard  Copy to clipboard without Flash     Internet Explorer and Firefox used to have non-standard APIs for accessing the clipboard  but their more modern versions have deprecated those methods  probably for security reasons      There is a nascent standards effort to try to come up with a  safe  way to solve the most common clipboard problems  probably requiring a specific user action like the Flash solution requires   and it looks like it may be partially implemented in the latest versions of Firefox and Chrome  but I haven t confirmed that yet

User · Answer

Even better approach without flash or any other requirements is clipboard js  All you need to do is add data-clipboard-target   toCopyElement  on any button  initialize it new Clipboard   btn    and it will copy the content of DOM with id toCopyElement to clipboard  This is a snippet that copy the text provided in your question via a link   One limitation though is that it does not work on safari  but it works on all other browser including mobile browsers as it does not use flash   x000D   x000D    function    x000D    new Clipboard   copy-text    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net clipboard js 1 5 12 clipboard min js  gt  lt  script gt  x000D   x000D   lt p id  content  gt Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s lt  p gt  x000D   x000D   lt a class  copy-text  data-clipboard-target   content  href     gt copy Text lt  a gt  x000D   x000D   x000D

User · Answer

Simplicity is the ultimate sophistication   If you don t want the text-to-be-coppied to be visible  jQuery      button copyButton   click function          this  siblings  input linkToCopy   select              document execCommand  copy          HTML     lt button class  copyButton  gt click here to copy lt  button gt   lt input class  linkToCopy  value  TEXT TO COPY  style  position  absolute  z-index  -999  opacity  0     gt

User · Answer

The text to copy is in text input like      lt input type  text  id  copyText  name  copyText  gt   and  on button click above text should get copied to clipboard so button is   like  lt button type  submit  id  copy button  data-clipboard-target  copyText  gt Copy lt  button gt   Your script should be like    lt script language  JavaScript  gt    document  ready function     var clip   new ZeroClipboard     copy button        moviePath   ZeroClipboard swf             lt  script gt    For CDN files    zeroclipboard swf     zeroclipboard js      note  ZeroClipboard swf and ZeroClipboard js  file should be in the same folder as your file using this functionality is  OR you have to include like we include  lt script src    gt  lt  script gt  on our pages

User · Answer

It s very important that the input field does not have display  none  The browser will not select the text and therefore will not be copied  Use opacity  0 with a width of 0px to fix the problem

User · Answer

Pure JS  without inline onclick  for paired classes  content - copy button   Would be more comfortable  if you have many elements    x000D   x000D   function    x000D   x000D     Creating textarea only once  but not each time    x000D  let area   document createElement  textarea    x000D  document body appendChild  area    x000D  area style display    none   x000D   x000D  let content   document querySelectorAll   js-content    x000D  let copy      document querySelectorAll   js-copy    x000D   x000D  for  let i   0  i  lt  copy length  i      x000D    copy i  addEventListener  click   function    x000D      area style display    block   x000D         because the classes are paired  we can use the  i  index from the clicked button  x000D      to get the required text block    x000D      area value   content i  innerText  x000D      area select    x000D      document execCommand  copy       x000D      area style display    none   x000D   x000D         decorative part    x000D      this innerHTML    Cop lt span style  color  red   gt ied lt  span gt    x000D         arrow function doesn t modify  this   here it s still the clicked button    x000D      setTimeout       gt  this innerHTML    Copy   2000    x000D        x000D    x000D   x000D        x000D  hr   margin  15px 0  border  none    x000D   lt span class  js-content  gt 1111 lt  span gt  x000D   lt button class  js-copy  gt Copy lt  button gt  x000D   lt hr gt  x000D   lt span class  js-content  gt 2222 lt  span gt  x000D   lt button class  js-copy  gt Copy lt  button gt  x000D   lt hr gt  x000D   lt span class  js-content  gt 3333 lt  span gt  x000D   lt button class  js-copy  gt Copy lt  button gt  x000D   x000D   x000D    Older browser support    x000D   x000D   function    x000D   x000D  var area   document createElement  textarea    x000D  document body appendChild  area    x000D  area style display    none   x000D   x000D  var content   document querySelectorAll   js-content    x000D  var copy      document querySelectorAll   js-copy    x000D   x000D  for  var i   0  i  lt  copy length  i      x000D    copyOnClick i   x000D    x000D   x000D  function copyOnClick i   x000D    copy i  addEventListener  click   function    x000D      area style display    block   x000D      area value   content i  innerText  x000D      area select    x000D      document execCommand  copy       x000D      area style display    none   x000D       x000D      var t   this  x000D      t innerHTML    Cop lt span style  color  red   gt ied lt  span gt    x000D      setTimeout  function    x000D        t innerHTML    Copy  x000D         2000    x000D        x000D    x000D   x000D        x000D  hr   margin  15px 0  border  none    x000D   lt span class  js-content  gt 1111 lt  span gt  x000D   lt button class  js-copy  gt Copy lt  button gt  x000D   lt hr gt  x000D   lt span class  js-content  gt 2222 lt  span gt  x000D   lt button class  js-copy  gt Copy lt  button gt  x000D   lt hr gt  x000D   lt span class  js-content  gt 3333 lt  span gt  x000D   lt button class  js-copy  gt Copy lt  button gt  x000D   x000D   x000D

User · Answer

jQuery simple solution   Should be triggered by user s click       lt textarea  gt    appendTo  body   val text  select   each function                  document execCommand  copy               remove

User · Answer

you can copy an individual text apart from an HTML element s text           var copyToClipboard   function  text                var  txt       lt textarea   gt                   txt val text                   css   width   1px   height   1px                      appendTo  body                  txt select                 if  document execCommand  copy                       txt remove

User · Answer

As of 2020  you should use the Clipboard Api  navigator clipboard writeText  text here you want to copy   then function          alert  It worked  Do a CTRL - V to paste      function          alert  Failure to copy  Check permissions for clipboard        Here is more info about interacting with the clipboard

User · Answer

Both will works like a charm      JAVASCRIPT   function CopyToClipboard containerid    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         alert  text copied         Also in html    lt button id  button1  onclick  CopyToClipboard  div1    gt Click to copy lt  button gt    lt div id  div1   gt Text To Copy  lt  div gt    lt textarea placeholder  Press ctrl v to Paste the copied text  rows  5  cols  20  gt  lt  textarea gt    JQUERY  https   paulund co uk jquery-copy-clipboard

User · Answer

With Line Breaks  Extention of the Answer from Alvaro Montoro    var ClipboardHelper          copyElement  function   element               this copyText  element text               copyText function text     Linebreaks with  n               var  tempInput        lt textarea gt                body   append  tempInput            tempInput val text  select            document execCommand  copy             tempInput remove              ClipboardHelper copyText  Hello nWorld    ClipboardHelper copyElement    body h1   first

User · Answer

Update 2020  This solution uses execCommand  While that feature was fine at the moment of writing this answer  it is now considered obsolete  It will still work on many browsers  but its use is discouraged as support may be dropped   There is another non-Flash way  apart from the Clipboard API mentioned in jfriend00 s answer   You need to select the text and then execute the command copy to copy to the clipboard whatever text is currently selected on the page  For example  this function will copy the content of the passed element into the clipboard  updated with suggestion in the comments from PointZeroTwo   function copyToClipboard element        var  temp      quot  lt input gt  quot           quot body quot   append  temp        temp val   element  text    select        document execCommand  quot copy quot         temp remove       This is how it works   Creates a temporarily hidden text field  Copies the content of the element to that text field  Selects the content of the text field  Executes the command copy like  document execCommand  quot copy quot    Removes the temporary text field   NOTE that the inner text of the element can contain whitespace  So if you want to use if for example for passwords you may trim the text by using   element  text   trim   in the code above  You can see a quick demo here   x000D   x000D  function copyToClipboard element      var  temp       lt input gt          body   append  temp      temp val   element  text    select      document execCommand  copy       temp remove      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt   lt p id  p1  gt P1  I am paragraph 1 lt  p gt   lt p id  p2  gt P2  I am a second paragraph lt  p gt   lt button onclick  copyToClipboard   p1    gt Copy P1 lt  button gt   lt button onclick  copyToClipboard   p2    gt Copy P2 lt  button gt   lt br  gt  lt br  gt  lt input type  text  placeholder  Paste here for test    gt  x000D   x000D   x000D   The main issue is that not all browsers support this feature at the moment  but you can use it on the main ones from   Chrome 43 Internet Explorer 10 Firefox 41 Safari 10   Update 1  This can be achieved also with a pure JavaScript solution  no jQuery    x000D   x000D  function copyToClipboard elementId          Create a  hidden  input   var aux   document createElement  input          Assign it the value of the specified element   aux setAttribute  value   document getElementById elementId  innerHTML         Append it to the body   document body appendChild aux         Highlight its content   aux select          Copy the highlighted text   document execCommand  copy          Remove it from the body   document body removeChild aux      x000D   lt p id  p1  gt P1  I am paragraph 1 lt  p gt   lt p id  p2  gt P2  I am a second paragraph lt  p gt   lt button onclick  copyToClipboard  p1    gt Copy P1 lt  button gt   lt button onclick  copyToClipboard  p2    gt Copy P2 lt  button gt   lt br  gt  lt br  gt  lt input type  text  placeholder  Paste here for test    gt  x000D   x000D   x000D   Notice that we pass the id without the   now  As madzohan reported in the comments below  there is some strange issue with the 64-bit version of Google Chrome in some cases  running the file locally   This issue seems to be fixed with the non-jQuery solution above  Madzohan tried in Safari and the solution worked but using document execCommand  SelectAll   instead of using  select    as specified in the chat and in the comments below   As PointZeroTwo points out in the comments  the code could be improved so it would return a success failure result  You can see a demo on this jsFiddle   UPDATE  COPY KEEPING THE TEXT FORMAT As a user pointed out in the Spanish version of StackOverflow  the solutions listed above work perfectly if you want to copy the content of an element literally  but they don t work that great if you want to paste the copied text with format  as it is copied into an input type  quot text quot   the format is  quot lost quot    A solution for that would be to copy into a content editable div and then copy it using the execCommand in a similar way  Here there is an example - click on the copy button and then paste into the content editable box below   x000D   x000D  function copy element id     var aux   document createElement  div      aux setAttribute  contentEditable   true     aux innerHTML   document getElementById element id  innerHTML    aux setAttribute  onfocus    document execCommand  selectAll  false null        document body appendChild aux     aux focus      document execCommand  copy      document body removeChild aux     x000D   target     width 400px    height 100px    border 1px solid  ccc    x000D   lt p id  demo  gt  lt b gt Bold text lt  b gt  and  lt u gt underlined text lt  u gt   lt  p gt   lt button onclick  copy  demo    gt Copy Keeping Format lt  button gt     lt div id  target  contentEditable  true  gt  lt  div gt  x000D   x000D   x000D   And in jQuery  it would be like this   x000D   x000D  function copy selector     var  temp       lt div gt          body   append  temp      temp attr  contenteditable   true          html   selector  html    select           on  focus   function     document execCommand  selectAll  false null              focus      document execCommand  copy       temp remove      x000D   target     width 400px    height 100px    border 1px solid  ccc    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt    lt p id  demo  gt  lt b gt Bold text lt  b gt  and  lt u gt underlined text lt  u gt   lt  p gt   lt button onclick  copy   demo    gt Copy Keeping Format lt  button gt     lt div id  target  contentEditable  true  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can use this code for copy input value in page in Clipboard by click a button  This is Html   lt input type  text  value  xxx  id  link  class  span12    gt   lt button type  button  class  btn btn-info btn-sm  onclick  copyToClipboard   link    gt      Copy Input Value  lt  button gt    Then for this html   we must use this JQuery Code  function copyToClipboard element          element  select        document execCommand  copy        This is the simplest solution for this question

User · Answer

clipboard js is a nice utility that allows copying of text or HTML data to the clipboard without use of Flash  It s very easy to use  just include the  js and use something like this    lt button id  markup-copy  gt Copy Button lt  button gt    lt script gt      document getElementById  markup-copy   addEventListener  click   function             clipboard copy                text plain    Markup text  Paste me into a rich text editor                 text html     lt i gt here lt  i gt  is some  lt b gt rich text lt  b gt              then              function   console log  success                   function err  console log  failure   err                        lt  script gt    clipboard js is also on GitHub   Edit on Jan 15  2016   The top answer was edited today to reference the same API in my answer posted in August 2015   The previous text was instructing users to use ZeroClipboard   Just want to be clear that I didn t yank this from jfriend00 s answer  rather the other way around

User · Answer

Clipboard-polyfill library is a polyfill for the modern Promise-based asynchronous clipboard API   install in CLI   npm install clipboard-polyfill    import as clipboard in JS file  window clipboard   require  clipboard-polyfill      example  I m using it in a bundle with require  babel-polyfill    and tested it on chrome 67  All good for production

User · Answer

lt div class  form-group  gt       lt label class  font-normal MyText  gt MyText to copy lt  label gt  amp nbsp       lt button type  button  class  btn btn-default btn-xs btnCopy  data  MyText  gt Copy lt  button gt   lt  div gt        btnCopy   click function              var element     this  attr  data            copyToClipboard         element           function copyToClipboard element        var  temp       lt input gt            body   append  temp        temp val   element  text    select        document execCommand  copy         temp remove

[jquery] Click button copy to clipboard using jQuery

Examples related to jquery

Examples related to html

Examples related to css