How do I copy to the clipboard in JavaScript

Question

What is the best way to copy text to the clipboard  multi-browser   I have tried  function copyToClipboard text        if  window clipboardData       Internet Explorer         window clipboardData setData  quot Text quot   text         else           unsafeWindow netscape security PrivilegeManager enablePrivilege  quot UniversalXPConnect quot            const clipboardHelper   Components classes  quot  mozilla org widget clipboardhelper 1 quot   getService Components interfaces nsIClipboardHelper           clipboardHelper copyString text            But in Internet Explorer it gives a syntax error  In Firefox  it says unsafeWindow is not defined  A nice trick without using Flash  How does Trello access the user  39 s clipboard

User · Answer

In addition to Dean Taylor s updated answer  July 2015   I wrote a jQuery method looking like his example   jsFiddle        Copies the current selected text to the SO clipboard   This method must be called from an event to work with  execCommand       param  String  text Text to copy    param  Boolean   fallback  Set to true shows a prompt    return Boolean Returns  true  if the text was copied or the user clicked on accept  in prompt    false  otherwise    var CopyToClipboard   function text  fallback       var fb   function               t remove            if  fallback     undefined  amp  amp  fallback                var fs    Please  copy the following text                if  window prompt fs  text      null  return true                    return false             var  t       lt textarea   gt          t val text  css           width   100px           height   40px         appendTo  body         t select        try           if  document execCommand  copy                   t remove                return true                    fb              catch  e            fb

User · Answer

In 2018  here s how you can go about it   async copySomething text       try       const toCopy   text    location href      await navigator clipboard writeText toCopy       console log  Text or Page URL copied          catch  err        console error  Failed to copy     err           It is used in my Angular 6  code like so    lt button mat-menu-item  click   copySomething    gt       lt span gt Copy link lt  span gt   lt  button gt    If I pass in a string  it copies it  If nothing  it copies the page s URL   More gymnastics to the clipboard stuff can be done too  See more information here   Unblocking Clipboard Access

User · Answer

This is an expansion of Chase Seibert s answer  with the advantage that it will work for IMAGE and TABLE elements  not just DIVs on Internet  Explorer  9  if  document createRange           Internet Explorer 9 and modern browsers     var r   document createRange        r setStartBefore to copy       r setEndAfter to copy       r selectNode to copy       var sel   window getSelection        sel addRange r       document execCommand  Copy        Does nothing on Firefox   else          Internet Explorer 8 and earlier  This stuff won t work        on Internet Explorer 9          unless forced into a backward compatibility mode         or selecting plain divs  not img or table       var r   document body createTextRange        r moveToElementText to copy       r select       r execCommand  Copy

User · Answer

My bad  This only works in Internet  Explorer  Here s yet another way to copy text   lt p gt       lt a onclick  quot window clipboardData setData  text   document getElementById  Test   innerText   quot  gt Copy lt  a gt   lt  p gt

User · Answer

Automatic copying to the clipboard may be dangerous  and therefore most browsers  except Internet  Explorer  make it very difficult  Personally  I use the following simple trick  function copyToClipboard text      window prompt  quot Copy to clipboard  Ctrl C  Enter quot   text      The user is presented with the prompt box  where the text to be copied is already selected  Now it s enough to press Ctrl   C and Enter  to close the box  -- and voila  Now the clipboard copy operation is safe  because the user does it manually  but in a pretty straightforward way   Of course  it works in all browsers   x000D   x000D   lt button id  demo  onclick  copyToClipboard document getElementById  demo   innerHTML   gt This is what I want to copy lt  button gt    lt script gt    function copyToClipboard text        window prompt  Copy to clipboard  Ctrl C  Enter   text        lt  script gt  x000D   x000D   x000D

User · Answer

If you want a really simple solution  takes less than 5 minutes to integrate  and looks good right out of the box  then Clippy is a nice alternative to some of the more complex solutions  It was written by a cofounder of GitHub  Example Flash embed code below   lt object     classid  quot clsid d27cdb6e-ae6d-11cf-96b8-444553540000 quot      width  quot 110 quot      height  quot 14 quot      id  quot clippy quot  gt        lt param name  quot movie quot  value  quot  flash clippy swf quot   gt       lt param name  quot allowScriptAccess quot  value  quot always quot   gt       lt param name  quot quality quot  value  quot high quot   gt       lt param name  quot scale quot  value  quot noscale quot   gt       lt param NAME  quot FlashVars quot  value  quot text   text  quot   gt       lt param name  quot bgcolor quot  value  quot   bgcolor  quot   gt       lt embed         src  quot  flash clippy swf quot          width  quot 110 quot          height  quot 14 quot          name  quot clippy quot          quality  quot high quot          allowScriptAccess  quot always quot          type  quot application x-shockwave-flash quot          pluginspage  quot http   www macromedia com go getflashplayer quot          FlashVars  quot text   text  quot          bgcolor  quot   bgcolor  quot   gt   lt  object gt   Remember to replace   text  with the text you need copied  and   bgcolor  with a color

User · Answer

Reading and modifying the clipboard from a webpage raises security and privacy concerns  However  in Internet nbsp Explorer  it is possible to do it  I found this example snippet    x000D   x000D       lt script type  text javascript  gt  x000D          function select all obj    x000D              var text val eval obj   x000D              text val focus    x000D              text val select    x000D              r   text val createTextRange    x000D              if   r execCommand  return     feature detection x000D              r execCommand  copy    x000D            x000D       lt  script gt  x000D       lt input value  http   www sajithmr com  x000D       onclick  select all this   name  url  type  text    gt  x000D   x000D   x000D

User · Answer

Simple  ready-to-use and not obsolete solution  function copyToClipboard elementIdToCopy  elementIdToNotifyOutcome        const contentToCopy   document getElementById elementIdToCopy  innerHTML      const elementToNotifyOutcome   document getElementById elementIdToNotifyOutcome        navigator clipboard writeText contentToCopy  then function             elementToNotifyOutcome classList add  success            elementToNotifyOutcome innerHTML    Copied           function             elementToNotifyOutcome classList add  failure            elementToNotifyOutcome innerHTML    Sorry  did not work

User · Answer

I have used clipboard js   We can get it on npm   npm install clipboard --save   And also on Bower  bower install clipboard --save   Usage  amp  examples are at https   zenorocha github io clipboard js

User · Answer

Using the JavaScript feature using try catch you can even have better error handling in doing so like this   copyToClipboard         let el   document getElementById  Test   innerText     el focus       el select        try           var successful   document execCommand  copy            if  successful                console log  Copied Successfully  Do whatever you want next                      else               throw   Unable to copy                        catch  err            console warn  Oops  Something went wrong    err

User · Answer

This solution was found here  The document execCommand  quot copy quot    is not supported on Internet Explorer 8 and earlier     x000D   x000D  const copyBtn    document getElementById  copyBtn    const input   document getElementById  input     function copyText       const value   input value       input select       selects the input variable as the text to be copied   input setSelectionRange 0  99999      this is used to set the selection range for mobile devices      document execCommand  copy       copies the selected text      alert  Copied the text     value      displays the copied text in a prompt    copyBtn onmousedown   function        copyText      x000D   lt input type  text  id  input  placeholder  Type text to copy       gt   lt button id  copyBtn  gt    Copy  lt  button gt  x000D   x000D   x000D

User · Answer

x000D   x000D     lt  DOCTYPE html gt  x000D   x000D     lt style gt  x000D       t   x000D        width  1px x000D        height  1px x000D        border  none x000D        x000D       t focus   x000D        outline  none x000D        x000D     lt  style gt  x000D   x000D     lt script gt  x000D      function copy text    x000D        var t   document getElementById  t   x000D        t innerHTML   text x000D        t select   x000D        try   x000D          var successful   document execCommand  copy   x000D          var msg   successful    successfully     unsuccessfully  x000D          console log  text coppied     msg  x000D          catch  err    x000D          console log  Unable to copy text   x000D          x000D        t innerHTML      x000D        x000D     lt  script gt  x000D   x000D     lt textarea id t gt  lt  textarea gt  x000D   x000D     lt button onclick  copy  hello world    gt  x000D      Click me x000D     lt  button gt  x000D   x000D   x000D

User · Answer

As far as I know that only works in Internet nbsp Explorer   See also Dynamic Tools - JavaScript Copy To Clipboard  but it requires the user to change the configuration first and even then it doesn t seems to work

User · Answer

This was the only thing I ever got working  after looking up various ways all around the Internet  This is a messy topic  There are lots of solutions posted around the world and most of them do not work  This worked for me   NOTE  This code will only work when executed as direct synchronous code to something like an  onClick  method  If you call in an asynchronous response to Ajax or in any other asynchronous way it will not work   copyToClipboard text        var copyText   document createElement  input        copyText type    text       document body appendChild copyText       copyText style    display  inline  width  1px        copyText value   text      copyText focus        document execCommand  SelectAll        document execCommand  Copy        copyText remove        I do realize this code will show a 1-pixel wide component visibly on the screen for a millisecond  but decided not to worry about that  which is something that others can address if a real problem

User · Answer

Since Chrome 42  and Firefox 41  now support the document execCommand  copy   command  I created a couple of functions for a cross-browser copy-to-clipboard ability using a combination of Tim Down s old answer and Google Developer s answer   x000D   x000D  function selectElementContents el           Copy textarea  pre  div  etc      if  document body createTextRange               Internet Explorer         var textRange   document body createTextRange            textRange moveToElementText el           textRange select            textRange execCommand  Copy              else if  window getSelection  amp  amp  document createRange               Non-Internet Explorer         var range   document createRange            range selectNodeContents el           var sel   window getSelection            sel removeAllRanges            sel addRange range           try               var successful   document execCommand  copy                var msg   successful    successful     unsuccessful               console log  Copy command was     msg                     catch  err                console log  Oops  unable to copy                         end function selectElementContents el   function make copy button el        var copy btn   document createElement  input        copy btn type    button       el parentNode insertBefore copy btn  el nextSibling       copy btn onclick   function             selectElementContents el               if  document queryCommandSupported  copy      parseInt navigator userAgent match  Chrom e ium     0-9        2    gt   42               Copy works with Internet Explorer 4   Chrome 42   Firefox 41   Opera 29          copy btn value    Copy to Clipboard             else              Select only for Safari and older Chrome  Firefox and Opera         copy btn value    Select All  then press Ctrl   C to Copy               Note  document queryCommandSupported  copy   should return  true  on browsers that support copy      but there was a bug in Chrome versions 42 to 47 that makes it return  false    So in those     versions of Chrome feature detection does not work      See https   code google com p chromium issues detail id 476508     make copy button document getElementById  markup     x000D   lt pre id  markup  gt    Text that can be copied or selected with cross browser support   lt  pre gt  x000D   x000D   x000D

User · Answer

As of Flash 10  you can only copy to clipboard if the action originates from user interaction with a Flash object   Read the related section from Adobe s Flash 10 announcement   The solution is to overlay a Flash object above the Copy button  or whatever element initiates the copy  ZeroClipboard is currently the best library with this implementation  Experienced Flash developers may just want to make their own library

User · Answer

document querySelector   some your textfield id   select    document execCommand  copy     The first line is to select the text that you want to copy  The second line is to copy the selected text

User · Answer

I have recently written a technical blog post on this very problem  I work at Lucidchart and we recently did an overhaul on our clipboard   Copying plain text to the clipboard is relatively simple  assuming you attempt to do it during a system copy event  user presses Ctrl   C or uses the browser s menu   var isIe    navigator userAgent toLowerCase   indexOf  quot msie quot         -1                navigator userAgent toLowerCase   indexOf  quot trident quot      -1    document addEventListener  copy   function e        var textToPutOnClipboard    quot This is some text quot       if  isIe            window clipboardData setData  Text   textToPutOnClipboard         else           e clipboardData setData  text plain   textToPutOnClipboard             e preventDefault         Putting text on the clipboard not during a system copy event is much more difficult  It looks like some of these other answers reference ways to do it via Flash  which is the only cross-browser way to do it  so far as I understand   Other than that  there are some options on a browser-by-browser basis  This is the most simple in Internet  Explorer  where you can access the clipboardData object at anytime from JavaScript via  window clipboardData   When you attempt to do this outside of a system cut  copy  or paste event  however  Internet  Explorer will prompt the user to grant the web application clipboard permission   In Chrome  you can create a Chrome extension that will give you clipboard permissions  this is what we do for Lucidchart   Then for users with your extension installed you ll just need to fire the system event yourself  document execCommand  copy     It looks like Firefox has some options that allow users to grant permissions to certain sites to access the clipboard  but I haven t tried any of these personally

User · Answer

Here is my solution   var codeElement       document getElementsByClassName  testelm    amp  amp          document getElementsByClassName  testelm   length       document getElementsByClassName  testelm   0            if  codeElement              var e   document createRange        e selectNodeContents codeElement       var selection   window getSelection        selection removeAllRanges        selection addRange e       document execCommand  Copy        selection removeAllRanges

User · Answer

clipboard js is a small  non-Flash  utility that allows copying of text or HTML data to the clipboard  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      Note  This has been deprecated now  Migrate to here

User · Answer

ZeroClipboard is the best cross-browser solution I ve found   lt div id  quot copy quot  data-clipboard-text  quot Copy Me  quot  gt Click to copy lt  div gt   lt script src  quot ZeroClipboard js quot  gt  lt  script gt   lt script gt    var clip   new ZeroClipboard  document getElementById  copy       lt  script gt   If you need non-Flash support for iOS you just add a fall-back  clip on   noflash   function   client  args            quot  copy quot   click function            var txt     this  attr  data-clipboard-text            prompt   quot Copy link  then click OK  quot   txt                http   zeroclipboard org  https   github com zeroclipboard ZeroClipboard

User · Answer

To copy a selected text   Text To Copy   to your clipboard  create a Bookmarklet  browser bookmark that executes JavaScript  and execute it  click on it   It will create a temporary textarea   Code from GitHub   https   gist github com stefanmaric 2abf96c740191cda3bc7a8b0fc905a7d   function  text      var node   document createElement  textarea      var selection   document getSelection       node textContent   text    document body appendChild node      selection removeAllRanges      node select      document execCommand  copy       selection removeAllRanges      document body removeChild node       Text To Copy

User · Answer

The other methods will copy plain text to the clipboard  To copy HTML  i e   you can paste results into a WYSIWYG editor   you can do the following in Internet  Explorer only  This is is fundamentally different from the other methods  as the browser actually visibly selects the content     Create an editable DIV and append the HTML content you want copied var editableDiv   document createElement  quot div quot    with  editableDiv        contentEditable   true    editableDiv appendChild someContentElement       Select the editable content and copy it to the clipboard var r   document body createTextRange    r moveToElementText editableDiv   r select    r execCommand  quot Copy quot        Deselect  so the browser doesn t leave the element visibly selected r moveToElementText someHiddenDiv   r select

User · Answer

Using document execCommand will do the job for you     Using that  you can also do cut  copy and paste     This is one simple clipboard copy functionality which copies everything from input text      x000D   x000D  function copyInputText     x000D    var copyText   document querySelector   input    x000D    copyText select    x000D    document execCommand  copy    x000D    x000D   x000D  document querySelector   copy   addEventListener  click   copyInputText   x000D   lt input id  input  type  text    gt  x000D   lt button id  copy  gt Copy lt  button gt  x000D   x000D   x000D    For more information  see Interact with the clipboard  add-on

User · Answer

This is a standalone class and ensures no flashing could occur from the temporary textarea by placing it off-screen  This works in Safari  desktop   Firefox  and Chrome                                                                                         ClipboardClass                                                                                     var ClipboardClass    function          function copyText text               Create a temporary element off-screen to hold text          var tempElem       lt textarea style  quot position  absolute  top  -8888px  left  -8888px quot  gt                quot body quot   append tempElem            tempElem val text  select            document execCommand  quot copy quot            tempElem remove                                                                                                       Class API                                                                                         return           copyText  copyText

User · Answer

This is an expansion of Chase Seibert s answer  with the advantage that it will work for IMAGE and TABLE elements  not just DIVs on Internet  Explorer  9  if  document createRange           Internet Explorer 9 and modern browsers     var r   document createRange        r setStartBefore to copy       r setEndAfter to copy       r selectNode to copy       var sel   window getSelection        sel addRange r       document execCommand  Copy        Does nothing on Firefox   else          Internet Explorer 8 and earlier  This stuff won t work        on Internet Explorer 9          unless forced into a backward compatibility mode         or selecting plain divs  not img or table       var r   document body createTextRange        r moveToElementText to copy       r select       r execCommand  Copy

User · Answer

I was going to use clipboard js  but it doesn t have any mobile solution in place  yet      so I wrote a super small library  Cheval This will either copy the text  desktop  Android  and Safari 10    or at the very least  select the text  older versions of iOS   Minified it is just over 1  kB  In desktop Safari  before version 10  it tells the user to  quot Press Command   C to copy quot   You also don t need to write any JavaScript to use it

User · Answer

For the security reason you can t do that  You must choose Flash for copying to the clipboard   I suggest this one  http   zeroclipboard org

User · Answer

For the security reason you can t do that  You must choose Flash for copying to the clipboard   I suggest this one  http   zeroclipboard org

User · Answer

Here is my take on that one     function copy text        var input   document createElement  input        input setAttribute  value   text       document body appendChild input       input select        var result   document execCommand  copy        document body removeChild input       return result        korayem  Note that using html input field won t respect line breaks  n and will flatten any text into a single line   As mentioned by  nikksan in the comments  using textarea will fix the problem as follows   function copy text        var input   document createElement  textarea        input innerHTML   text      document body appendChild input       input select        var result   document execCommand  copy        document body removeChild input       return result

User · Answer

This is the best  So much winning   var toClipboard   function text        var doc   document          Create temporary element     var textarea   doc createElement  textarea        textarea style position    absolute       textarea style opacity     0       textarea textContent      text       doc body appendChild textarea        textarea focus        textarea setSelectionRange 0  textarea value length           Copy the selection     var success      try           success   doc execCommand  copy              catch e            success   false             textarea remove         return success

User · Answer

I found the following solution   I have the text in a hidden input  Because setSelectionRange doesn t work on hidden inputs  I changed temporarily the type to text  copied the text  and then made it hidden again  If you want to copy the text from an element  you can pass it to the function and save its content in the target variable   jQuery   copy   on  click   function          copyToClipboard         function copyToClipboard         var target   jQuery   hidden text            Make it visible  so can be focused     target attr  type    text        target focus           Select all the text     target 0  setSelectionRange 0  target val   length           Copy the selection     var succeed      try           succeed   document execCommand  copy              catch  e            succeed   false                Hide input again     target attr  type    hidden         return succeed

User · Answer

There are many answers already  however like to add one  jQuery   Works great on any browser  also mobile ones  i e   prompts about security  but when you accept it just works fine    function appCopyToClipBoard sText        var oText   false          bResult   false      try               oText   document createElement  textarea              oText  addClass  clipboardCopier   val sText  insertAfter  body   focus            oText select            document execCommand  Copy            bResult   true            catch e                 oText  remove        return bResult      In your code   if   appCopyToClipBoard  Hai there  This is copied to the clipboard           alert  Sorry  copy to clipboard failed

User · Answer

I compiled a few functions in a simple solution to cover all cases  with prompt fallback if needed   window copyToClipboard   function text         Internet Explorer specific   if  window clipboardData  amp  amp  window clipboardData setData        return clipboardData setData  Text   text             All other modern browsers   target   document createElement  textarea      target style position    absolute     target style left    -9999px     target style top    0     target textContent   text    document body appendChild target     target focus      target setSelectionRange 0  target value length         Copy the selection of fall back to prompt   try       document execCommand  copy        target remove        console log  Copied to clipboard     text             catch e        console log  Can t copy string on this browser  Try to use Chrome  Firefox or Opera        window prompt  Copy to clipboard  Ctrl C  Enter   text           Test it here  https   jsfiddle net jv0avz65

User · Answer

In case you re reading text from the clipboard in a Chrome extension  with  clipboardRead  permission allowed  you can use the below code   function readTextFromClipboardInChromeExtension         var ta       lt textarea  gt            body   append ta       ta focus        document execCommand  paste        var text   ta val        ta blur        ta remove        return text

User · Answer

Here is an easy example      lt  DOCTYPE html gt   lt html gt       lt body gt           lt input type  text                 value  Hello  World                  id  myInput  gt           lt button onclick  myFunction    gt Copy text lt  button gt            lt p gt The document execCommand   method is not supported            in Internet amp nbsp Explorer amp nbsp 8 and earlier  lt  p gt            lt script gt              function myFunction                     var copyText   document getElementById  myInput                    copyText select                    document execCommand  copy                    alert  Copied the text      copyText value                          lt  script gt       lt  body gt   lt  html gt

User · Answer

As of Flash 10  you can only copy to clipboard if the action originates from user interaction with a Flash object   Read the related section from Adobe s Flash 10 announcement   The solution is to overlay a Flash object above the Copy button  or whatever element initiates the copy  ZeroClipboard is currently the best library with this implementation  Experienced Flash developers may just want to make their own library

User · Answer

Here is the simple Ajax session based clipboard for the same website  Note that the session must be enabled  amp  valid and this solution works for the same site  I tested it on CodeIgniter  but I ran into session Ajax problem  but this solved that problem too  If you don t want to play with sessions  use a database table  JavaScript jQuery  lt script type  quot text javascript quot  gt        document  ready function                 quot  copy btn id quot   click function                   post  quot  lt  php echo base url     gt ajax foo copy  quot    this  val    null                  function data                          Copied successfully                     quot html quot                                         quot  paste btn id quot   click function                   post  quot  lt  php echo base url     gt ajax foo paste  quot   null                 function data                           paste btn id   val data                      quot html quot                                     lt  script gt   HTML content  lt input type  text  id  copy btn id  onclick  this select      value  myvalue    gt   lt input type  text  id  paste btn id  value      gt   PHP code  lt  php     class Ajax extends CI Controller            public function foo copy  val                this- gt session- gt set userdata array  clipboard val    gt   val                       public function foo paste                echo  this- gt session- gt userdata  clipboard val                exit                      gt

User · Answer

I have put together the solution presented by  dean-taylor here along with some other select   unselect code from elsewhere into a jQuery plugin available on NPM   https   www npmjs com package jquery text-select  Install   npm install --save jquery text-select  Usage    lt script gt        document  ready function                selectMe   selectText       Hightlight   select the text             selectMe   selectText false      Clear the selection              copyMe   copyText       Copy text to clipboard          lt  script gt    Futher info on methods   events can be found at the NPM registry page above

User · Answer

Using the JavaScript feature using try catch you can even have better error handling in doing so like this   copyToClipboard         let el   document getElementById  Test   innerText     el focus       el select        try           var successful   document execCommand  copy            if  successful                console log  Copied Successfully  Do whatever you want next                      else               throw   Unable to copy                        catch  err            console warn  Oops  Something went wrong    err

User · Answer

The other methods will copy plain text to the clipboard  To copy HTML  i e   you can paste results into a WYSIWYG editor   you can do the following in Internet  Explorer only  This is is fundamentally different from the other methods  as the browser actually visibly selects the content     Create an editable DIV and append the HTML content you want copied var editableDiv   document createElement  quot div quot    with  editableDiv        contentEditable   true    editableDiv appendChild someContentElement       Select the editable content and copy it to the clipboard var r   document body createTextRange    r moveToElementText editableDiv   r select    r execCommand  quot Copy quot        Deselect  so the browser doesn t leave the element visibly selected r moveToElementText someHiddenDiv   r select

User · Answer

function copytoclipboard element         var  temp      quot  lt input gt  quot           quot body quot   append  temp        temp val  0    element  select        document execCommand  quot copy quot         temp remove

User · Answer

I had the same problem building a custom grid edit from  something like Excel  and compatibility with Excel  I had to support selecting multiple cells  copying and pasting   Solution  create a textarea where you will be inserting data for the user to copy  for me when the user is selecting cells   set focus on it  for example  when user press Ctrl  and select the whole text   So  when the user hit Ctrl   C he she gets copied cells he she selected  After testing just resizing the textarea to one pixel  I didn t test if it will be working on display none   It works nicely on all browsers  and it is transparent to the user   Pasting - you could do same like this  differs on your target  - keep focus on textarea and catch paste events using onpaste  in my project I use textareas in cells to edit    I can t paste an example  commercial project   but you get the idea

User · Answer

From one of the projects I ve been working on  a jQuery copy-to-clipboard plugin that utilizes the ZeroClipboard library  It is easier to use than the native Zero Clipboard plugin if you re a heavy jQuery user

User · Answer

function copytoclipboard element         var  temp      quot  lt input gt  quot           quot body quot   append  temp        temp val  0    element  select        document execCommand  quot copy quot         temp remove

User · Answer

Using document execCommand will do the job for you     Using that  you can also do cut  copy and paste     This is one simple clipboard copy functionality which copies everything from input text      x000D   x000D  function copyInputText     x000D    var copyText   document querySelector   input    x000D    copyText select    x000D    document execCommand  copy    x000D    x000D   x000D  document querySelector   copy   addEventListener  click   copyInputText   x000D   lt input id  input  type  text    gt  x000D   lt button id  copy  gt Copy lt  button gt  x000D   x000D   x000D    For more information  see Interact with the clipboard  add-on

User · Answer

If the copied link has to be pasted on the same site  then a simple solution is to highlight the text before pressing the simple HTML copy button and then on pressing it  the text content is stored in a session  And wherever it is to be pasted  there is a paste button      I know  it s not a persistent and universal solution  but it s something

User · Answer

x000D   x000D     lt  DOCTYPE html gt  x000D   x000D     lt style gt  x000D       t   x000D        width  1px x000D        height  1px x000D        border  none x000D        x000D       t focus   x000D        outline  none x000D        x000D     lt  style gt  x000D   x000D     lt script gt  x000D      function copy text    x000D        var t   document getElementById  t   x000D        t innerHTML   text x000D        t select   x000D        try   x000D          var successful   document execCommand  copy   x000D          var msg   successful    successfully     unsuccessfully  x000D          console log  text coppied     msg  x000D          catch  err    x000D          console log  Unable to copy text   x000D          x000D        t innerHTML      x000D        x000D     lt  script gt  x000D   x000D     lt textarea id t gt  lt  textarea gt  x000D   x000D     lt button onclick  copy  hello world    gt  x000D      Click me x000D     lt  button gt  x000D   x000D   x000D

User · Answer

x000D   x000D         td   click function  e    x000D          var clickedCell     e target  closest  td    x000D          navigator clipboard writeText clickedCell text     x000D          alert clickedCell text     x000D          x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D   lt tr gt  x000D   lt td gt First lt td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D   lt td gt Second lt td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D   lt td gt Third lt td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D   lt td gt Fourth lt td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    I ve read all the answers  as of June 1st  2020  I ve beeen struggling to solve this when I finally found documentation      td   click function  e        var clickedCell     e target  closest  td        navigator clipboard writeText clickedCell text           It will write the clicked cell text to the browser clipboard   You can change the selectors  td  for anything you want  you can add console log for debugging and or alert functions   Here is documentation  https   developer mozilla org en-US docs Web API Clipboard writeText

User · Answer

Here is the simple Ajax session based clipboard for the same website  Note that the session must be enabled  amp  valid and this solution works for the same site  I tested it on CodeIgniter  but I ran into session Ajax problem  but this solved that problem too  If you don t want to play with sessions  use a database table  JavaScript jQuery  lt script type  quot text javascript quot  gt        document  ready function                 quot  copy btn id quot   click function                   post  quot  lt  php echo base url     gt ajax foo copy  quot    this  val    null                  function data                          Copied successfully                     quot html quot                                         quot  paste btn id quot   click function                   post  quot  lt  php echo base url     gt ajax foo paste  quot   null                 function data                           paste btn id   val data                      quot html quot                                     lt  script gt   HTML content  lt input type  text  id  copy btn id  onclick  this select      value  myvalue    gt   lt input type  text  id  paste btn id  value      gt   PHP code  lt  php     class Ajax extends CI Controller            public function foo copy  val                this- gt session- gt set userdata array  clipboard val    gt   val                       public function foo paste                echo  this- gt session- gt userdata  clipboard val                exit                      gt

User · Answer

I had to copy the non-input boxes text  text within any div span tag  from the page and came up with following code  The only trick is to have a hidden field  but as type TEXT  It won t work with type hidden   function copyToClipboard sID        var aField   document getElementById  hiddenField         aField hidden   false      aField value    document getElementById sID  textContent      aField select        document execCommand  copy        alert  Following text has been copied to the clipboard  n n    aField value       aField hidden   true      And in the HTML add the following   input type  text  id  hiddenField  style  width 5px border 0    gt

User · Answer

I use this very successfully  without jQuery or any other framework    function copyToClp txt       txt   document createTextNode txt       var m   document      var w   window      var b   m body      b appendChild txt       if  b createTextRange            var d   b createTextRange            d moveToElementText txt           d select            m execCommand  copy               else           var d   m createRange            var g   w getSelection          d selectNodeContents txt           g   removeAllRanges            g   addRange d           m execCommand  copy            g   removeAllRanges              txt remove        Warning  Tabs are converted to spaces  at least in Chrome

User · Answer

I had the same problem building a custom grid edit from  something like Excel  and compatibility with Excel  I had to support selecting multiple cells  copying and pasting   Solution  create a textarea where you will be inserting data for the user to copy  for me when the user is selecting cells   set focus on it  for example  when user press Ctrl  and select the whole text   So  when the user hit Ctrl   C he she gets copied cells he she selected  After testing just resizing the textarea to one pixel  I didn t test if it will be working on display none   It works nicely on all browsers  and it is transparent to the user   Pasting - you could do same like this  differs on your target  - keep focus on textarea and catch paste events using onpaste  in my project I use textareas in cells to edit    I can t paste an example  commercial project   but you get the idea

User · Answer

I compiled a few functions in a simple solution to cover all cases  with prompt fallback if needed   window copyToClipboard   function text         Internet Explorer specific   if  window clipboardData  amp  amp  window clipboardData setData        return clipboardData setData  Text   text             All other modern browsers   target   document createElement  textarea      target style position    absolute     target style left    -9999px     target style top    0     target textContent   text    document body appendChild target     target focus      target setSelectionRange 0  target value length         Copy the selection of fall back to prompt   try       document execCommand  copy        target remove        console log  Copied to clipboard     text             catch e        console log  Can t copy string on this browser  Try to use Chrome  Firefox or Opera        window prompt  Copy to clipboard  Ctrl C  Enter   text           Test it here  https   jsfiddle net jv0avz65

User · Answer

This was the only thing that worked for me   let textarea   document createElement  textarea    textarea setAttribute  type    hidden    textarea textContent    the string you want to copy   document body appendChild textarea   textarea select    document execCommand  copy

User · Answer

I have tried many solutions  If it works in modern browsers  it won t in Internet nbsp Explorer  If it works in Internet nbsp Explorer  it won t on iOS  I finally groomed them all and arrived at the below fix that works in all the browsers  iOS  webview  and Android   Note  I also covered the scenario where the user denies permission to the clipboard  Additionally  the message  link copied  will be displayed even if the user copies manually    lt div class  form-group col-md-12  gt       lt div class  input-group col-md-9  gt           lt input name  copyurl                 type  text                 class  form-control br-0 no-focus                 id  invite-url                 placeholder  http   www invitelink com example                 readonly gt           lt span class  input-group-addon  id  copy-link  title  Click here to copy the invite link  gt               lt i class  fa fa-clone txt-18 text-success  aria-hidden  true  gt  lt  i gt           lt  span gt       lt  div gt       lt span class  text-success copy-success hidden  gt Link copied  lt  span gt   lt  div gt    Script   var addEvent    window attachEvent    window addEventListener  var event    copy   var  inviteUrl       invite-url         copy-link   on  click   function e        if   inviteUrl val              if  navigator userAgent match  ipad ipod iphone i                 var el    inviteUrl get 0               var editable   el contentEditable              var readOnly   el readOnly              el contentEditable   true              el readOnly   false              var range   document createRange                range selectNodeContents el               var sel   window getSelection                sel removeAllRanges                sel addRange range               el setSelectionRange 0  999999               el contentEditable   editable              el readOnly   readOnly              document execCommand  copy                 inviteUrl blur                      else                inviteUrl select                document execCommand  copy                         addEvent event  function event        if   inviteUrl val    amp  amp  event target id     invite-url             var  copyLink       copy-link i             copyLink removeClass  fa-clone             copyLink addClass  fa-check                copy-success   removeClass  hidden            setTimeout function                  copyLink removeClass  fa-check                 copyLink addClass  fa-clone                    copy-success   addClass  hidden               2000

User · Answer

The following approach works in Chrome  Firefox  Internet Explorer and Edge  and in recent versions of Safari  copy support was added in version 10 which was released Oct 2016     Create a textarea and set its contents to the text you want copied to the clipboard  Append the textarea to the DOM  Select the text in the textarea  Call document execCommand  copy   Remove the textarea from the dom    Note  you will not see the textarea  as it is added and removed within the same synchronous invocation of Javascript code   Some things to watch out for if you are implementing this yourself    For security reasons  this can only called from an event handler such as click  Just as with opening windows   Internet Explorer will show a permission dialog the first time the clipboard is updated  Internet Explorer  and Edge will scroll when the textarea is focused  execCommand   may throw in some cases  Newlines and tabs can get swallowed unless you use a textarea   Most articles seem to recommend using a div  The textarea will be visible while the Internet Explorer dialog is shown  you either need to hide it  or use the Internet Explorer specific clipboardData API  In Internet Explorer system administrators can disable the clipboard API    The function below should handle all of the following issues as cleanly as possible  Please leave a comment if you find any problems or have any suggestions for improving it      Copies a string to the clipboard  Must be called from within an    event handler such as click  May return false if it failed  but    this is not always possible  Browser support for Chrome 43      Firefox 42   Safari 10   Edge and Internet Explorer 10      Internet Explorer  The clipboard feature may be disabled by    an administrator  By default a prompt is shown the first    time the clipboard is used  per session   function copyToClipboard text        if  window clipboardData  amp  amp  window clipboardData setData               Internet Explorer-specific code path to prevent textarea being shown while dialog is visible          return clipboardData setData  Text   text              else if  document queryCommandSupported  amp  amp  document queryCommandSupported  copy              var textarea   document createElement  textarea            textarea textContent   text          textarea style position    fixed       Prevent scrolling to bottom of page in Microsoft Edge          document body appendChild textarea           textarea select            try               return document execCommand  copy        Security exception may be thrown by some browsers                    catch  ex                console warn  Copy to clipboard failed    ex               return false                    finally               document body removeChild textarea                       https   jsfiddle net fx6a6n6x

User · Answer

This can be done just by using a combination of getElementbyId  Select    blur   and the copy command   Note  The select   method selects all the text in a  lt textarea  element or an  lt input  element with a text field  This might not work on a button   Usage  let copyText   document getElementById  input-field    copyText select   document execCommand  copy    copyReferal blur   document getElementbyId  help-text   textContent    Copied    The blur   method will remove the ugly highlighted portion instead of that you can show at beautiful message that your content was copied successfully

User · Answer

I have tried many solutions  If it works in modern browsers  it won t in Internet nbsp Explorer  If it works in Internet nbsp Explorer  it won t on iOS  I finally groomed them all and arrived at the below fix that works in all the browsers  iOS  webview  and Android   Note  I also covered the scenario where the user denies permission to the clipboard  Additionally  the message  link copied  will be displayed even if the user copies manually    lt div class  form-group col-md-12  gt       lt div class  input-group col-md-9  gt           lt input name  copyurl                 type  text                 class  form-control br-0 no-focus                 id  invite-url                 placeholder  http   www invitelink com example                 readonly gt           lt span class  input-group-addon  id  copy-link  title  Click here to copy the invite link  gt               lt i class  fa fa-clone txt-18 text-success  aria-hidden  true  gt  lt  i gt           lt  span gt       lt  div gt       lt span class  text-success copy-success hidden  gt Link copied  lt  span gt   lt  div gt    Script   var addEvent    window attachEvent    window addEventListener  var event    copy   var  inviteUrl       invite-url         copy-link   on  click   function e        if   inviteUrl val              if  navigator userAgent match  ipad ipod iphone i                 var el    inviteUrl get 0               var editable   el contentEditable              var readOnly   el readOnly              el contentEditable   true              el readOnly   false              var range   document createRange                range selectNodeContents el               var sel   window getSelection                sel removeAllRanges                sel addRange range               el setSelectionRange 0  999999               el contentEditable   editable              el readOnly   readOnly              document execCommand  copy                 inviteUrl blur                      else                inviteUrl select                document execCommand  copy                         addEvent event  function event        if   inviteUrl val    amp  amp  event target id     invite-url             var  copyLink       copy-link i             copyLink removeClass  fa-clone             copyLink addClass  fa-check                copy-success   removeClass  hidden            setTimeout function                  copyLink removeClass  fa-check                 copyLink addClass  fa-clone                    copy-success   addClass  hidden               2000

User · Answer

I like this one     lt input onclick  this select     type  text  value  copy me    gt    If a user doesn t know how to copy text in their OS  then it s likely they don t know how to paste either   So just have it automatically selected  leaving the rest to the user

User · Answer

The below function can be used to copy into the clipboard  copyToclipboard    event  text    gt        var container   event currentTarget      let tempInnerHtml   container innerHTML      container innerHTML   text      window getSelection   removeAllRanges        let range   document createRange        range selectNode container       window getSelection   addRange range       document execCommand  copy        window getSelection   removeAllRanges        container innerHTML   tempInnerHtml

User · Answer

Since Chrome 42  and Firefox 41  now support the document execCommand  copy   command  I created a couple of functions for a cross-browser copy-to-clipboard ability using a combination of Tim Down s old answer and Google Developer s answer   x000D   x000D  function selectElementContents el           Copy textarea  pre  div  etc      if  document body createTextRange               Internet Explorer         var textRange   document body createTextRange            textRange moveToElementText el           textRange select            textRange execCommand  Copy              else if  window getSelection  amp  amp  document createRange               Non-Internet Explorer         var range   document createRange            range selectNodeContents el           var sel   window getSelection            sel removeAllRanges            sel addRange range           try               var successful   document execCommand  copy                var msg   successful    successful     unsuccessful               console log  Copy command was     msg                     catch  err                console log  Oops  unable to copy                         end function selectElementContents el   function make copy button el        var copy btn   document createElement  input        copy btn type    button       el parentNode insertBefore copy btn  el nextSibling       copy btn onclick   function             selectElementContents el               if  document queryCommandSupported  copy      parseInt navigator userAgent match  Chrom e ium     0-9        2    gt   42               Copy works with Internet Explorer 4   Chrome 42   Firefox 41   Opera 29          copy btn value    Copy to Clipboard             else              Select only for Safari and older Chrome  Firefox and Opera         copy btn value    Select All  then press Ctrl   C to Copy               Note  document queryCommandSupported  copy   should return  true  on browsers that support copy      but there was a bug in Chrome versions 42 to 47 that makes it return  false    So in those     versions of Chrome feature detection does not work      See https   code google com p chromium issues detail id 476508     make copy button document getElementById  markup     x000D   lt pre id  markup  gt    Text that can be copied or selected with cross browser support   lt  pre gt  x000D   x000D   x000D

User · Answer

Update 2015  currently there s a way to use document execCommand to work with the clipboard  clipboard js provides a cross-browser way to work with the clipboard  browser support

User · Answer

It looks like you took the code from Greasemonkey JavaScript Copy to Clipboard button or the original source of this snippet    This code was for Greasemonkey  hence the unsafeWindow  And I guess the syntax error in Internet  Explorer comes from the const keyword which is specific to Firefox  replace it with var

User · Answer

I was going to use clipboard js  but it doesn t have any mobile solution in place  yet      so I wrote a super small library  Cheval This will either copy the text  desktop  Android  and Safari 10    or at the very least  select the text  older versions of iOS   Minified it is just over 1  kB  In desktop Safari  before version 10  it tells the user to  quot Press Command   C to copy quot   You also don t need to write any JavaScript to use it

User · Answer

In browsers other than Internet  Explorer you need to use a small Flash object to manipulate the clipboard  e g   Auto copy to clipboard

User · Answer

x000D   x000D         td   click function  e    x000D          var clickedCell     e target  closest  td    x000D          navigator clipboard writeText clickedCell text     x000D          alert clickedCell text     x000D          x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D   lt tr gt  x000D   lt td gt First lt td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D   lt td gt Second lt td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D   lt td gt Third lt td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D   lt td gt Fourth lt td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    I ve read all the answers  as of June 1st  2020  I ve beeen struggling to solve this when I finally found documentation      td   click function  e        var clickedCell     e target  closest  td        navigator clipboard writeText clickedCell text           It will write the clicked cell text to the browser clipboard   You can change the selectors  td  for anything you want  you can add console log for debugging and or alert functions   Here is documentation  https   developer mozilla org en-US docs Web API Clipboard writeText

User · Answer

As far as I know that only works in Internet nbsp Explorer   See also Dynamic Tools - JavaScript Copy To Clipboard  but it requires the user to change the configuration first and even then it doesn t seems to work

User · Answer

I like this one     lt input onclick  this select     type  text  value  copy me    gt    If a user doesn t know how to copy text in their OS  then it s likely they don t know how to paste either   So just have it automatically selected  leaving the rest to the user

User · Answer

Reading and modifying the clipboard from a webpage raises security and privacy concerns  However  in Internet nbsp Explorer  it is possible to do it  I found this example snippet    x000D   x000D       lt script type  text javascript  gt  x000D          function select all obj    x000D              var text val eval obj   x000D              text val focus    x000D              text val select    x000D              r   text val createTextRange    x000D              if   r execCommand  return     feature detection x000D              r execCommand  copy    x000D            x000D       lt  script gt  x000D       lt input value  http   www sajithmr com  x000D       onclick  select all this   name  url  type  text    gt  x000D   x000D   x000D

User · Answer

In addition to Dean Taylor s updated answer  July 2015   I wrote a jQuery method looking like his example   jsFiddle        Copies the current selected text to the SO clipboard   This method must be called from an event to work with  execCommand       param  String  text Text to copy    param  Boolean   fallback  Set to true shows a prompt    return Boolean Returns  true  if the text was copied or the user clicked on accept  in prompt    false  otherwise    var CopyToClipboard   function text  fallback       var fb   function               t remove            if  fallback     undefined  amp  amp  fallback                var fs    Please  copy the following text                if  window prompt fs  text      null  return true                    return false             var  t       lt textarea   gt          t val text  css           width   100px           height   40px         appendTo  body         t select        try           if  document execCommand  copy                   t remove                return true                    fb              catch  e            fb

User · Answer

Overview There are three primary browser APIs for copying to the clipboard   Async Clipboard API  navigator clipboard writeText   Text-focused portion available in Chrome 66  March 2018  Access is asynchronous and uses JavaScript Promises  can be written so security user prompts  if displayed  don t interrupt the JavaScript in the page  Text can be copied to the clipboard directly from a variable  Only supported on pages served over HTTPS  In Chrome 66 pages inactive tabs can write to the clipboard without a permissions prompt    document execCommand  copy    Most browsers support this as of  April 2015  see Browser Support below   Access is synchronous  i e  stops JavaScript in the page until complete including displaying and user interacting with any security prompts  Text is read from the DOM and placed on the clipboard  During testing  April 2015 only Internet Explorer was noted as displaying permissions prompts whilst writing to the clipboard    Overriding the copy event  See Clipboard API documentation on Overriding the copy event  Allows you to modify what appears on the clipboard from any copy event  can include other formats of data other than plain text  Not covered here as it doesn t directly answer the question     General development notes Don t expect clipboard related commands to work whilst you are testing code in the console  Generally  the page is required to be active  Async Clipboard API  or requires user interaction  e g  a user click  to allow  document execCommand  copy    to access the clipboard see below for more detail  IMPORTANT  noted here 2020 02 20  Note that since this post was originally written deprecation of permissions in cross-origin IFRAMEs and other IFRAME  quot sandboxing quot  prevents the embedded demos  quot Run code snippet quot  buttons and  quot codepen io example quot  from working in some browsers  including Chrome and Microsoft Edge   To develop create your own web page  serve that page over an HTTPS connection to test and develop against  Here is a test demo page which demonstrates the code working  https   deanmarktaylor github io clipboard-test  Async   Fallback Due to the level of browser support for the new Async Clipboard API  you will likely want to fall back to the document execCommand  copy   method to get good browser coverage  Here is a simple example  may not work embedded in this site  read  quot important quot  note above    x000D   x000D  function fallbackCopyTextToClipboard text      var textArea   document createElement  textarea      textArea value   text          Avoid scrolling to bottom   textArea style top    0     textArea style left    0     textArea style position    fixed      document body appendChild textArea     textArea focus      textArea select       try       var successful   document execCommand  copy        var msg   successful    successful     unsuccessful       console log  Fallback  Copying text command was     msg       catch  err        console error  Fallback  Oops  unable to copy   err          document body removeChild textArea     function copyTextToClipboard text      if   navigator clipboard        fallbackCopyTextToClipboard text       return        navigator clipboard writeText text  then function         console log  Async  Copying to clipboard was successful          function err        console error  Async  Could not copy text     err            var copyBobBtn   document querySelector   js-copy-bob-btn      copyJaneBtn   document querySelector   js-copy-jane-btn     copyBobBtn addEventListener  click   function event      copyTextToClipboard  Bob          copyJaneBtn addEventListener  click   function event      copyTextToClipboard  Jane        x000D   lt div style  display inline-block  vertical-align top   gt     lt button class  js-copy-bob-btn  gt Set clipboard to BOB lt  button gt  lt br   gt  lt br   gt     lt button class  js-copy-jane-btn  gt Set clipboard to JANE lt  button gt   lt  div gt   lt div style  display inline-block   gt     lt textarea class  js-test-textarea  cols  35  rows  4  gt Try pasting into here to see what you have on your clipboard      lt  textarea gt   lt  div gt  x000D   x000D   x000D    codepen io example may not work  read  quot important quot  note above  Note that this snippet is not working well in Stack Overflow s embedded preview you can try it here  https   codepen io DeanMarkTaylor pen RMRaJX editors 1011 Async Clipboard API  Chrome 66 announcement post  March 2018  Reference Async Clipboard API draft documentation  Note that there is an ability to  quot request permission quot  and test for access to the clipboard via the permissions API in Chrome 66  var text    quot Example text to appear on clipboard quot   navigator clipboard writeText text  then function       console log  Async  Copying to clipboard was successful        function err      console error  Async  Could not copy text     err        document execCommand  copy   The rest of this post goes into the nuances and detail of the document execCommand  copy   API  Browser Support The JavaScript document execCommand  copy   support has grown  see the links below for browser updates   Internet Explorer 10   although this document indicates some support was there from Internet Explorer 5 5    Google Chrome 43    April 2015  Mozilla Firefox 41   shipping  September 2015  Opera 29   based on Chromium 42   April 2015   Simple Example  may not work embedded in this site  read  quot important quot  note above   x000D   x000D  var copyTextareaBtn   document querySelector   js-textareacopybtn     copyTextareaBtn addEventListener  click   function event      var copyTextarea   document querySelector   js-copytextarea      copyTextarea focus      copyTextarea select       try       var successful   document execCommand  copy        var msg   successful    successful     unsuccessful       console log  Copying text command was     msg       catch  err        console log  Oops  unable to copy            x000D   lt p gt     lt button class  js-textareacopybtn  style  vertical-align top   gt Copy Textarea lt  button gt     lt textarea class  js-copytextarea  gt Hello I m some text lt  textarea gt   lt  p gt  x000D   x000D   x000D   Complex Example  Copy to clipboard without displaying input The above simple example works great if there is a textarea or input element visible on the screen  In some cases  you might wish to copy text to the clipboard without displaying an input   textarea element  This is one example of a way to work around this  basically insert an element  copy to clipboard  remove element   Tested with Google Chrome 44  Firefox 42 0a1  and Internet Explorer 11 0 8600 17814   may not work embedded in this site  read  quot important quot  note above   x000D   x000D  function copyTextToClipboard text      var textArea   document createElement  textarea                   This styling is an extra step which is likely not required                Why is it here  To ensure       1  the element is able to have focus and selection       2  if the element was to flash render it has minimal visual impact       3  less flakyness with selection and copying which   might   occur if         the textarea element is not visible            The likelihood is the element won t even render  not even a      flash  so some of these are just precautions  However in      Internet Explorer the element is visible whilst the popup      box asking the user for permission for the web page to      copy to the clipboard             Place in the top-left corner of screen regardless of scroll position    textArea style position    fixed     textArea style top   0    textArea style left   0        Ensure it has a small width and height  Setting to 1px   1em      doesn t work as this gives a negative w h on some browsers    textArea style width    2em     textArea style height    2em         We don t need padding  reducing the size if it does flash render    textArea style padding   0        Clean up any borders    textArea style border    none     textArea style outline    none     textArea style boxShadow    none         Avoid flash of the white box if rendered for any reason    textArea style background    transparent       textArea value   text     document body appendChild textArea     textArea focus      textArea select       try       var successful   document execCommand  copy        var msg   successful    successful     unsuccessful       console log  Copying text command was     msg       catch  err        console log  Oops  unable to copy           document body removeChild textArea       var copyBobBtn   document querySelector   js-copy-bob-btn      copyJaneBtn   document querySelector   js-copy-jane-btn     copyBobBtn addEventListener  click   function event      copyTextToClipboard  Bob          copyJaneBtn addEventListener  click   function event      copyTextToClipboard  Jane        x000D   lt div style  display inline-block  vertical-align top   gt     lt button class  js-copy-bob-btn  gt Set clipboard to BOB lt  button gt  lt br   gt  lt br   gt     lt button class  js-copy-jane-btn  gt Set clipboard to JANE lt  button gt   lt  div gt   lt div style  display inline-block   gt     lt textarea class  js-test-textarea  cols  35  rows  4  gt Try pasting into here to see what you have on your clipboard      lt  textarea gt   lt  div gt  x000D   x000D   x000D   Additional notes Only works if the user takes an action All document execCommand  copy   calls must take place as a direct result of a user action  e g  click event handler  This is a measure to prevent messing with the user s clipboard when they don t expect it  See the Google Developers post here for more info  Clipboard API Note the full Clipboard API draft specification can be found here  https   w3c github io clipboard-apis  Is it supported   document queryCommandSupported  copy   should return true if the command  quot is supported by the browser quot   and document queryCommandEnabled  copy   return true if the document execCommand  copy   will succeed if called now  Checking to ensure the command was called from a user-initiated thread and other requirements are met   However  as an example of browser compatibility issues  Google Chrome from  April to  October 2015 only returned true from document queryCommandSupported  copy   if the command was called from a user-initiated thread  Note compatibility detail below  Browser Compatibility Detail Whilst a simple call to document execCommand  copy   wrapped in a try catch block called as a result of a user click will get you the most compatibility use the following has some provisos  Any call to document execCommand  document queryCommandSupported or document queryCommandEnabled should be wrapped in a try catch block  Different browser implementations and browser versions throw differing types of exceptions when called instead of returning false  Different browser implementations are still in flux and the Clipboard API is still in draft  so remember to do your testing

User · Answer

It seems I misread the question  but for reference  you can extract a range of the DOM  not to the clipboard  compatible with all modern browsers   and combine it with the oncopy  onpaste  and onbeforepaste events to get the clipboard behaviour  Here s the code to achieve this  function clipBoard sCommand      var oRange   contentDocument createRange      oRange setStart startNode  startOffset     oRange setEnd endNode  endOffset         This is where the actual selection happens       in the above  startNode and endNode are      DOM nodes defining the beginning and      end of the  quot selection quot  respectively        startOffset and endOffset are constants      that are defined as follows            END TO END  2          END TO START  3          NODE AFTER  1          NODE BEFORE  0          NODE BEFORE AND AFTER  2          NODE INSIDE  3          START TO END  1          START TO START  0       And it would be used like oRange START TO END         switch sCommand         case  quot cut quot         this oFragment   oRange extractContents          oRange collapse          break       case  quot copy quot         this oFragment   oRange cloneContents          break       case  quot paste quot         oRange deleteContents          var cloneFragment   this oFragment cloneNode true        oRange insertNode cloneFragment         oRange collapse          break

User · Answer

This is the best  So much winning   var toClipboard   function text        var doc   document          Create temporary element     var textarea   doc createElement  textarea        textarea style position    absolute       textarea style opacity     0       textarea textContent      text       doc body appendChild textarea        textarea focus        textarea setSelectionRange 0  textarea value length           Copy the selection     var success      try           success   doc execCommand  copy              catch e            success   false             textarea remove         return success

User · Answer

After searching a solution that supports Safari and other browsers  Internet nbsp Explorer nbsp 9 and later    I use the same as GitHub  ZeroClipboard  Example   http   zeroclipboard org index-v1 x html  HTML   lt html gt     lt body gt       lt button id  copy-button  data-clipboard-text  Copy Me   title  Click to copy me   gt Copy to Clipboard lt  button gt       lt script src  ZeroClipboard js  gt  lt  script gt       lt script src  main js  gt  lt  script gt     lt  body gt   lt  html gt    JavaScript  var client   new ZeroClipboard document getElementById  copy-button      client on  ready   function  readyEvent           alert   ZeroClipboard SWF is ready           client on  aftercopy   function  event                this       client              event target      the element that was clicked         event target style display    none           alert  Copied text to clipboard      event data  text plain

User · Answer

After searching a solution that supports Safari and other browsers  Internet nbsp Explorer nbsp 9 and later    I use the same as GitHub  ZeroClipboard  Example   http   zeroclipboard org index-v1 x html  HTML   lt html gt     lt body gt       lt button id  copy-button  data-clipboard-text  Copy Me   title  Click to copy me   gt Copy to Clipboard lt  button gt       lt script src  ZeroClipboard js  gt  lt  script gt       lt script src  main js  gt  lt  script gt     lt  body gt   lt  html gt    JavaScript  var client   new ZeroClipboard document getElementById  copy-button      client on  ready   function  readyEvent           alert   ZeroClipboard SWF is ready           client on  aftercopy   function  event                this       client              event target      the element that was clicked         event target style display    none           alert  Copied text to clipboard      event data  text plain

User · Answer

In browsers other than Internet  Explorer you need to use a small Flash object to manipulate the clipboard  e g   Auto copy to clipboard

User · Answer

Here s an elegant solution for Angular 5 x    Component   import     ChangeDetectionStrategy    ChangeDetectorRef    Component    ElementRef    EventEmitter    Input    OnInit    Output    Renderer2    ViewChild   from   angular core     Component     selector   copy-to-clipboard     templateUrl     copy-to-clipboard component html     styleUrls      copy-to-clipboard component scss      changeDetection  ChangeDetectionStrategy OnPush     export class CopyToClipboardComponent implements OnInit      ViewChild  input   input  ElementRef     Input   size    md      Input   theme    complement      Input   content  string     Output   copied  EventEmitter lt string gt    new EventEmitter lt string gt        Output   error  EventEmitter lt string gt    new EventEmitter lt string gt        constructor private renderer  Renderer2        ngOnInit         copyToClipboard          const rootElement   this renderer selectRootElement this input nativeElement           iOS Safari blocks programmtic execCommand copying normally  without this hack         https   stackoverflow com questions 34045777 copy-to-clipboard-using-javascript-in-ios     if  navigator userAgent match  ipad ipod iphone i            this renderer setAttribute this input nativeElement   contentEditable    true           const range   document createRange           range selectNodeContents this input nativeElement          const sel   window getSelection           sel removeAllRanges          sel addRange range          rootElement setSelectionRange 0  999999         else         rootElement select               try         document execCommand  copy          this copied emit          catch  err          this error emit err                  Template    lt button class  btn btn-  size   btn-  theme    type  button   click   copyToClipboard    gt     lt ng-content gt  lt  ng-content gt   lt  button gt    lt input  input class  hidden-input   ngModel   content  gt    Styles    hidden-input     position  fixed    top  0    left  0    width  1px     height  1px    padding  0    border  0    box-shadow  none    outline  none    background  transparent

User · Answer

In case you re reading text from the clipboard in a Chrome extension  with  clipboardRead  permission allowed  you can use the below code   function readTextFromClipboardInChromeExtension         var ta       lt textarea  gt            body   append ta       ta focus        document execCommand  paste        var text   ta val        ta blur        ta remove        return text

User · Answer

I have recently written a technical blog post on this very problem  I work at Lucidchart and we recently did an overhaul on our clipboard   Copying plain text to the clipboard is relatively simple  assuming you attempt to do it during a system copy event  user presses Ctrl   C or uses the browser s menu   var isIe    navigator userAgent toLowerCase   indexOf  quot msie quot         -1                navigator userAgent toLowerCase   indexOf  quot trident quot      -1    document addEventListener  copy   function e        var textToPutOnClipboard    quot This is some text quot       if  isIe            window clipboardData setData  Text   textToPutOnClipboard         else           e clipboardData setData  text plain   textToPutOnClipboard             e preventDefault         Putting text on the clipboard not during a system copy event is much more difficult  It looks like some of these other answers reference ways to do it via Flash  which is the only cross-browser way to do it  so far as I understand   Other than that  there are some options on a browser-by-browser basis  This is the most simple in Internet  Explorer  where you can access the clipboardData object at anytime from JavaScript via  window clipboardData   When you attempt to do this outside of a system cut  copy  or paste event  however  Internet  Explorer will prompt the user to grant the web application clipboard permission   In Chrome  you can create a Chrome extension that will give you clipboard permissions  this is what we do for Lucidchart   Then for users with your extension installed you ll just need to fire the system event yourself  document execCommand  copy     It looks like Firefox has some options that allow users to grant permissions to certain sites to access the clipboard  but I haven t tried any of these personally

User · Answer

In 2018  here s how you can go about it   async copySomething text       try       const toCopy   text    location href      await navigator clipboard writeText toCopy       console log  Text or Page URL copied          catch  err        console error  Failed to copy     err           It is used in my Angular 6  code like so    lt button mat-menu-item  click   copySomething    gt       lt span gt Copy link lt  span gt   lt  button gt    If I pass in a string  it copies it  If nothing  it copies the page s URL   More gymnastics to the clipboard stuff can be done too  See more information here   Unblocking Clipboard Access

User · Answer

Here is my take on that one     function copy text        var input   document createElement  input        input setAttribute  value   text       document body appendChild input       input select        var result   document execCommand  copy        document body removeChild input       return result        korayem  Note that using html input field won t respect line breaks  n and will flatten any text into a single line   As mentioned by  nikksan in the comments  using textarea will fix the problem as follows   function copy text        var input   document createElement  textarea        input innerHTML   text      document body appendChild input       input select        var result   document execCommand  copy        document body removeChild input       return result

User · Answer

In Chrome you can use copy  the text or variable etc     While this isn t cross-browser  and doesn t work in a snippet    you could add it to the other cross-browser answers

User · Answer

clipboard js is a small  non-Flash  utility that allows copying of text or HTML data to the clipboard  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      Note  This has been deprecated now  Migrate to here

User · Answer

The other methods will copy plain text to the clipboard  To copy HTML  i e   you can paste results into a WYSIWYG editor   you can do the following in Internet  Explorer only  This is is fundamentally different from the other methods  as the browser actually visibly selects the content     Create an editable DIV and append the HTML content you want copied var editableDiv   document createElement  quot div quot    with  editableDiv        contentEditable   true    editableDiv appendChild someContentElement       Select the editable content and copy it to the clipboard var r   document body createTextRange    r moveToElementText editableDiv   r select    r execCommand  quot Copy quot        Deselect  so the browser doesn t leave the element visibly selected r moveToElementText someHiddenDiv   r select

User · Answer

This is a bit of a combination between the other answers   var copyToClipboard   function textToCopy          body            append     lt textarea name  fname  class  textToCopyInput   gt              val textToCopy            find   textToCopyInput            select          try           var successful   document execCommand  copy            var msg   successful    successful     unsuccessful           alert  Text copied to clipboard             catch  err              window prompt  To copy the text to clipboard  Ctrl C  Enter   textToCopy                    textToCopyInput   remove        It uses jQuery  but it doesn t have to of course  You can change that if you want  I just had jQuery to my disposal  You can also add some CSS to make sure the input doesn t show  For instance something like    textToCopyInput opacity  0  position  absolute     Or of course you could also do some inline styling   append     lt textarea name  fname  style  opacity  0   position  absolute   class  textToCopyInput   gt

User · Answer

document querySelector   some your textfield id   select    document execCommand  copy     The first line is to select the text that you want to copy  The second line is to copy the selected text

User · Answer

As far as I know that only works in Internet nbsp Explorer   See also Dynamic Tools - JavaScript Copy To Clipboard  but it requires the user to change the configuration first and even then it doesn t seems to work

User · Answer

Copy text from HTML input to the clipboard    x000D   x000D   function myFunction     x000D        Get the text field    x000D     var copyText   document getElementById  myInput    x000D   x000D        Select the text field    x000D     copyText select    x000D   x000D        Copy the text inside the text field    x000D     document execCommand  Copy    x000D   x000D        Alert the copied text    x000D     alert  Copied the text      copyText value   x000D     x000D    lt  -- The text field -- gt  x000D    lt input type  text  value  Hello Friend  id  myInput  gt  x000D   x000D    lt  -- The button used to copy the text -- gt  x000D   lt button onclick  myFunction    gt Copy text lt  button gt  x000D   x000D   x000D    Note  The document execCommand   method is not supported in Internet Explorer 9 and earlier   Source  W3Schools - Copy Text to Clipboard

User · Answer

In browsers other than Internet  Explorer you need to use a small Flash object to manipulate the clipboard  e g   Auto copy to clipboard

User · Answer

Here is my solution   var codeElement       document getElementsByClassName  testelm    amp  amp          document getElementsByClassName  testelm   length       document getElementsByClassName  testelm   0            if  codeElement              var e   document createRange        e selectNodeContents codeElement       var selection   window getSelection        selection removeAllRanges        selection addRange e       document execCommand  Copy        selection removeAllRanges

User · Answer

Overview There are three primary browser APIs for copying to the clipboard   Async Clipboard API  navigator clipboard writeText   Text-focused portion available in Chrome 66  March 2018  Access is asynchronous and uses JavaScript Promises  can be written so security user prompts  if displayed  don t interrupt the JavaScript in the page  Text can be copied to the clipboard directly from a variable  Only supported on pages served over HTTPS  In Chrome 66 pages inactive tabs can write to the clipboard without a permissions prompt    document execCommand  copy    Most browsers support this as of  April 2015  see Browser Support below   Access is synchronous  i e  stops JavaScript in the page until complete including displaying and user interacting with any security prompts  Text is read from the DOM and placed on the clipboard  During testing  April 2015 only Internet Explorer was noted as displaying permissions prompts whilst writing to the clipboard    Overriding the copy event  See Clipboard API documentation on Overriding the copy event  Allows you to modify what appears on the clipboard from any copy event  can include other formats of data other than plain text  Not covered here as it doesn t directly answer the question     General development notes Don t expect clipboard related commands to work whilst you are testing code in the console  Generally  the page is required to be active  Async Clipboard API  or requires user interaction  e g  a user click  to allow  document execCommand  copy    to access the clipboard see below for more detail  IMPORTANT  noted here 2020 02 20  Note that since this post was originally written deprecation of permissions in cross-origin IFRAMEs and other IFRAME  quot sandboxing quot  prevents the embedded demos  quot Run code snippet quot  buttons and  quot codepen io example quot  from working in some browsers  including Chrome and Microsoft Edge   To develop create your own web page  serve that page over an HTTPS connection to test and develop against  Here is a test demo page which demonstrates the code working  https   deanmarktaylor github io clipboard-test  Async   Fallback Due to the level of browser support for the new Async Clipboard API  you will likely want to fall back to the document execCommand  copy   method to get good browser coverage  Here is a simple example  may not work embedded in this site  read  quot important quot  note above    x000D   x000D  function fallbackCopyTextToClipboard text      var textArea   document createElement  textarea      textArea value   text          Avoid scrolling to bottom   textArea style top    0     textArea style left    0     textArea style position    fixed      document body appendChild textArea     textArea focus      textArea select       try       var successful   document execCommand  copy        var msg   successful    successful     unsuccessful       console log  Fallback  Copying text command was     msg       catch  err        console error  Fallback  Oops  unable to copy   err          document body removeChild textArea     function copyTextToClipboard text      if   navigator clipboard        fallbackCopyTextToClipboard text       return        navigator clipboard writeText text  then function         console log  Async  Copying to clipboard was successful          function err        console error  Async  Could not copy text     err            var copyBobBtn   document querySelector   js-copy-bob-btn      copyJaneBtn   document querySelector   js-copy-jane-btn     copyBobBtn addEventListener  click   function event      copyTextToClipboard  Bob          copyJaneBtn addEventListener  click   function event      copyTextToClipboard  Jane        x000D   lt div style  display inline-block  vertical-align top   gt     lt button class  js-copy-bob-btn  gt Set clipboard to BOB lt  button gt  lt br   gt  lt br   gt     lt button class  js-copy-jane-btn  gt Set clipboard to JANE lt  button gt   lt  div gt   lt div style  display inline-block   gt     lt textarea class  js-test-textarea  cols  35  rows  4  gt Try pasting into here to see what you have on your clipboard      lt  textarea gt   lt  div gt  x000D   x000D   x000D    codepen io example may not work  read  quot important quot  note above  Note that this snippet is not working well in Stack Overflow s embedded preview you can try it here  https   codepen io DeanMarkTaylor pen RMRaJX editors 1011 Async Clipboard API  Chrome 66 announcement post  March 2018  Reference Async Clipboard API draft documentation  Note that there is an ability to  quot request permission quot  and test for access to the clipboard via the permissions API in Chrome 66  var text    quot Example text to appear on clipboard quot   navigator clipboard writeText text  then function       console log  Async  Copying to clipboard was successful        function err      console error  Async  Could not copy text     err        document execCommand  copy   The rest of this post goes into the nuances and detail of the document execCommand  copy   API  Browser Support The JavaScript document execCommand  copy   support has grown  see the links below for browser updates   Internet Explorer 10   although this document indicates some support was there from Internet Explorer 5 5    Google Chrome 43    April 2015  Mozilla Firefox 41   shipping  September 2015  Opera 29   based on Chromium 42   April 2015   Simple Example  may not work embedded in this site  read  quot important quot  note above   x000D   x000D  var copyTextareaBtn   document querySelector   js-textareacopybtn     copyTextareaBtn addEventListener  click   function event      var copyTextarea   document querySelector   js-copytextarea      copyTextarea focus      copyTextarea select       try       var successful   document execCommand  copy        var msg   successful    successful     unsuccessful       console log  Copying text command was     msg       catch  err        console log  Oops  unable to copy            x000D   lt p gt     lt button class  js-textareacopybtn  style  vertical-align top   gt Copy Textarea lt  button gt     lt textarea class  js-copytextarea  gt Hello I m some text lt  textarea gt   lt  p gt  x000D   x000D   x000D   Complex Example  Copy to clipboard without displaying input The above simple example works great if there is a textarea or input element visible on the screen  In some cases  you might wish to copy text to the clipboard without displaying an input   textarea element  This is one example of a way to work around this  basically insert an element  copy to clipboard  remove element   Tested with Google Chrome 44  Firefox 42 0a1  and Internet Explorer 11 0 8600 17814   may not work embedded in this site  read  quot important quot  note above   x000D   x000D  function copyTextToClipboard text      var textArea   document createElement  textarea                   This styling is an extra step which is likely not required                Why is it here  To ensure       1  the element is able to have focus and selection       2  if the element was to flash render it has minimal visual impact       3  less flakyness with selection and copying which   might   occur if         the textarea element is not visible            The likelihood is the element won t even render  not even a      flash  so some of these are just precautions  However in      Internet Explorer the element is visible whilst the popup      box asking the user for permission for the web page to      copy to the clipboard             Place in the top-left corner of screen regardless of scroll position    textArea style position    fixed     textArea style top   0    textArea style left   0        Ensure it has a small width and height  Setting to 1px   1em      doesn t work as this gives a negative w h on some browsers    textArea style width    2em     textArea style height    2em         We don t need padding  reducing the size if it does flash render    textArea style padding   0        Clean up any borders    textArea style border    none     textArea style outline    none     textArea style boxShadow    none         Avoid flash of the white box if rendered for any reason    textArea style background    transparent       textArea value   text     document body appendChild textArea     textArea focus      textArea select       try       var successful   document execCommand  copy        var msg   successful    successful     unsuccessful       console log  Copying text command was     msg       catch  err        console log  Oops  unable to copy           document body removeChild textArea       var copyBobBtn   document querySelector   js-copy-bob-btn      copyJaneBtn   document querySelector   js-copy-jane-btn     copyBobBtn addEventListener  click   function event      copyTextToClipboard  Bob          copyJaneBtn addEventListener  click   function event      copyTextToClipboard  Jane        x000D   lt div style  display inline-block  vertical-align top   gt     lt button class  js-copy-bob-btn  gt Set clipboard to BOB lt  button gt  lt br   gt  lt br   gt     lt button class  js-copy-jane-btn  gt Set clipboard to JANE lt  button gt   lt  div gt   lt div style  display inline-block   gt     lt textarea class  js-test-textarea  cols  35  rows  4  gt Try pasting into here to see what you have on your clipboard      lt  textarea gt   lt  div gt  x000D   x000D   x000D   Additional notes Only works if the user takes an action All document execCommand  copy   calls must take place as a direct result of a user action  e g  click event handler  This is a measure to prevent messing with the user s clipboard when they don t expect it  See the Google Developers post here for more info  Clipboard API Note the full Clipboard API draft specification can be found here  https   w3c github io clipboard-apis  Is it supported   document queryCommandSupported  copy   should return true if the command  quot is supported by the browser quot   and document queryCommandEnabled  copy   return true if the document execCommand  copy   will succeed if called now  Checking to ensure the command was called from a user-initiated thread and other requirements are met   However  as an example of browser compatibility issues  Google Chrome from  April to  October 2015 only returned true from document queryCommandSupported  copy   if the command was called from a user-initiated thread  Note compatibility detail below  Browser Compatibility Detail Whilst a simple call to document execCommand  copy   wrapped in a try catch block called as a result of a user click will get you the most compatibility use the following has some provisos  Any call to document execCommand  document queryCommandSupported or document queryCommandEnabled should be wrapped in a try catch block  Different browser implementations and browser versions throw differing types of exceptions when called instead of returning false  Different browser implementations are still in flux and the Clipboard API is still in draft  so remember to do your testing

User · Answer

I found the following solution  The on-key-down handler creates a  quot pre quot  tag  We set the content to copy to this tag  and then make a selection on this tag and return true in the handler  This calls the standard handler of Chrome and copies selected text  And if you need it  you may set the timeout for a function for restoring the previous selection  My implementation on MooTools  function EnybyClipboard         this saveSelection   false      this callback   false      this pastedText   false       this restoreSelection   function             if  this saveSelection                window getSelection   removeAllRanges                for  var i   0  i  lt  this saveSelection length  i                      window getSelection   addRange this saveSelection i                              this saveSelection   false                        this copyText   function text            var div      special copy            if   div                div   new Element  pre                      id    special copy                    style    opacity  0 position  absolute top  -10000px right  0                               div injectInside document body                     div set  text   text           if  document createRange                var rng   document createRange                rng selectNodeContents div               this saveSelection                   var selection   window getSelection                for  var i   0  i  lt  selection rangeCount  i                      this saveSelection i    selection getRangeAt i                             window getSelection   removeAllRanges                window getSelection   addRange rng               setTimeout this restoreSelection bind this   100             else return alert  Copy did not work                    this getPastedText   function             if   this pastedText  alert  Nothing to paste                return this pastedText              this pasteText   function callback            var div      special paste            if   div                div   new Element  textarea                      id    special paste                    style    opacity  0 position  absolute top  -10000px right  0                               div injectInside document body               div addEvent  keyup   function                     if  this callback                        this pastedText      special paste   get  value                        this callback call null  this pastedText                       this callback   false                      this pastedText   false                      setTimeout this restoreSelection bind this   100                                   bind this                      div set  value                if  document createRange                var rng   document createRange                rng selectNodeContents div               this saveSelection                   var selection   window getSelection                for  var i   0  i  lt  selection rangeCount  i                      this saveSelection i    selection getRangeAt i                             window getSelection   removeAllRanges                window getSelection   addRange rng               div focus                this callback   callback            else return alert  Failed to paste                  Usage  enyby clip   new EnybyClipboard       Init  enyby clip copyText  some text       Place this in the Ctrl C handler and return true   enyby clip pasteText function callback pasted text        alert pasted text          Place this in Ctrl V handler and return true   On paste  it creates a textarea and works the same way  PS  Maybe this solution can be used for creating a full cross-browser solution without Flash  It works in Firefox and Chrome

User · Answer

I have put together the solution presented by  dean-taylor here along with some other select   unselect code from elsewhere into a jQuery plugin available on NPM   https   www npmjs com package jquery text-select  Install   npm install --save jquery text-select  Usage    lt script gt        document  ready function                selectMe   selectText       Hightlight   select the text             selectMe   selectText false      Clear the selection              copyMe   copyText       Copy text to clipboard          lt  script gt    Futher info on methods   events can be found at the NPM registry page above

User · Answer

If you want a really simple solution  takes less than 5 minutes to integrate  and looks good right out of the box  then Clippy is a nice alternative to some of the more complex solutions  It was written by a cofounder of GitHub  Example Flash embed code below   lt object     classid  quot clsid d27cdb6e-ae6d-11cf-96b8-444553540000 quot      width  quot 110 quot      height  quot 14 quot      id  quot clippy quot  gt        lt param name  quot movie quot  value  quot  flash clippy swf quot   gt       lt param name  quot allowScriptAccess quot  value  quot always quot   gt       lt param name  quot quality quot  value  quot high quot   gt       lt param name  quot scale quot  value  quot noscale quot   gt       lt param NAME  quot FlashVars quot  value  quot text   text  quot   gt       lt param name  quot bgcolor quot  value  quot   bgcolor  quot   gt       lt embed         src  quot  flash clippy swf quot          width  quot 110 quot          height  quot 14 quot          name  quot clippy quot          quality  quot high quot          allowScriptAccess  quot always quot          type  quot application x-shockwave-flash quot          pluginspage  quot http   www macromedia com go getflashplayer quot          FlashVars  quot text   text  quot          bgcolor  quot   bgcolor  quot   gt   lt  object gt   Remember to replace   text  with the text you need copied  and   bgcolor  with a color

User · Answer

Here s an elegant solution for Angular 5 x    Component   import     ChangeDetectionStrategy    ChangeDetectorRef    Component    ElementRef    EventEmitter    Input    OnInit    Output    Renderer2    ViewChild   from   angular core     Component     selector   copy-to-clipboard     templateUrl     copy-to-clipboard component html     styleUrls      copy-to-clipboard component scss      changeDetection  ChangeDetectionStrategy OnPush     export class CopyToClipboardComponent implements OnInit      ViewChild  input   input  ElementRef     Input   size    md      Input   theme    complement      Input   content  string     Output   copied  EventEmitter lt string gt    new EventEmitter lt string gt        Output   error  EventEmitter lt string gt    new EventEmitter lt string gt        constructor private renderer  Renderer2        ngOnInit         copyToClipboard          const rootElement   this renderer selectRootElement this input nativeElement           iOS Safari blocks programmtic execCommand copying normally  without this hack         https   stackoverflow com questions 34045777 copy-to-clipboard-using-javascript-in-ios     if  navigator userAgent match  ipad ipod iphone i            this renderer setAttribute this input nativeElement   contentEditable    true           const range   document createRange           range selectNodeContents this input nativeElement          const sel   window getSelection           sel removeAllRanges          sel addRange range          rootElement setSelectionRange 0  999999         else         rootElement select               try         document execCommand  copy          this copied emit          catch  err          this error emit err                  Template    lt button class  btn btn-  size   btn-  theme    type  button   click   copyToClipboard    gt     lt ng-content gt  lt  ng-content gt   lt  button gt    lt input  input class  hidden-input   ngModel   content  gt    Styles    hidden-input     position  fixed    top  0    left  0    width  1px     height  1px    padding  0    border  0    box-shadow  none    outline  none    background  transparent

User · Answer

I ve put together what I think is the best one   Uses cssText to avoid exceptions in Internet Explorer as opposed to style directly  Restores selection if there was one Sets read-only so the keyboard doesn t come up on mobile devices Has a workaround for iOS so that it actually works as it normally blocks execCommand   Here it is  const copyToClipboard    function initClipboardText       const textarea   document createElement  textarea          Move it off-screen    textarea style cssText    position  absolute  left  -99999em         Set to readonly to prevent mobile devices opening a keyboard when      text is  select   ed    textarea setAttribute  readonly   true      document body appendChild textarea      return function setClipboardText text        textarea value   text          Check if there is any content selected previously      const selected   document getSelection   rangeCount  gt  0         document getSelection   getRangeAt 0    false          iOS Safari blocks programmatic execCommand copying normally  without this hack         https   stackoverflow com questions 34045777 copy-to-clipboard-using-javascript-in-ios     if  navigator userAgent match  ipad ipod iphone i           const editable   textarea contentEditable        textarea contentEditable   true        const range   document createRange          range selectNodeContents textarea         const sel   window getSelection          sel removeAllRanges          sel addRange range         textarea setSelectionRange 0  999999         textarea contentEditable   editable            else         textarea select               try         const result   document execCommand  copy              Restore previous selection        if  selected            document getSelection   removeAllRanges            document getSelection   addRange selected                  return result            catch  err          console error err         return false                    Usage  copyToClipboard  some text

User · Answer

If the copied link has to be pasted on the same site  then a simple solution is to highlight the text before pressing the simple HTML copy button and then on pressing it  the text content is stored in a session  And wherever it is to be pasted  there is a paste button      I know  it s not a persistent and universal solution  but it s something

User · Answer

Update 2015  currently there s a way to use document execCommand to work with the clipboard  clipboard js provides a cross-browser way to work with the clipboard  browser support

User · Answer

In Chrome you can use copy  the text or variable etc     While this isn t cross-browser  and doesn t work in a snippet    you could add it to the other cross-browser answers

User · Answer

This was the only thing I ever got working  after looking up various ways all around the Internet  This is a messy topic  There are lots of solutions posted around the world and most of them do not work  This worked for me   NOTE  This code will only work when executed as direct synchronous code to something like an  onClick  method  If you call in an asynchronous response to Ajax or in any other asynchronous way it will not work   copyToClipboard text        var copyText   document createElement  input        copyText type    text       document body appendChild copyText       copyText style    display  inline  width  1px        copyText value   text      copyText focus        document execCommand  SelectAll        document execCommand  Copy        copyText remove        I do realize this code will show a 1-pixel wide component visibly on the screen for a millisecond  but decided not to worry about that  which is something that others can address if a real problem

User · Answer

In browsers other than Internet  Explorer you need to use a small Flash object to manipulate the clipboard  e g   Auto copy to clipboard

User · Answer

This was the only thing that worked for me   let textarea   document createElement  textarea    textarea setAttribute  type    hidden    textarea textContent    the string you want to copy   document body appendChild textarea   textarea select    document execCommand  copy

User · Answer

The below function can be used to copy into the clipboard  copyToclipboard    event  text    gt        var container   event currentTarget      let tempInnerHtml   container innerHTML      container innerHTML   text      window getSelection   removeAllRanges        let range   document createRange        range selectNode container       window getSelection   addRange range       document execCommand  copy        window getSelection   removeAllRanges        container innerHTML   tempInnerHtml

User · Answer

I had to copy the non-input boxes text  text within any div span tag  from the page and came up with following code  The only trick is to have a hidden field  but as type TEXT  It won t work with type hidden   function copyToClipboard sID        var aField   document getElementById  hiddenField         aField hidden   false      aField value    document getElementById sID  textContent      aField select        document execCommand  copy        alert  Following text has been copied to the clipboard  n n    aField value       aField hidden   true      And in the HTML add the following   input type  text  id  hiddenField  style  width 5px border 0    gt

User · Answer

My bad  This only works in Internet  Explorer  Here s yet another way to copy text   lt p gt       lt a onclick  quot window clipboardData setData  text   document getElementById  Test   innerText   quot  gt Copy lt  a gt   lt  p gt

User · Answer

I use this very successfully  without jQuery or any other framework    function copyToClp txt       txt   document createTextNode txt       var m   document      var w   window      var b   m body      b appendChild txt       if  b createTextRange            var d   b createTextRange            d moveToElementText txt           d select            m execCommand  copy               else           var d   m createRange            var g   w getSelection          d selectNodeContents txt           g   removeAllRanges            g   addRange d           m execCommand  copy            g   removeAllRanges              txt remove        Warning  Tabs are converted to spaces  at least in Chrome

User · Answer

I found the following solution  The on-key-down handler creates a  quot pre quot  tag  We set the content to copy to this tag  and then make a selection on this tag and return true in the handler  This calls the standard handler of Chrome and copies selected text  And if you need it  you may set the timeout for a function for restoring the previous selection  My implementation on MooTools  function EnybyClipboard         this saveSelection   false      this callback   false      this pastedText   false       this restoreSelection   function             if  this saveSelection                window getSelection   removeAllRanges                for  var i   0  i  lt  this saveSelection length  i                      window getSelection   addRange this saveSelection i                              this saveSelection   false                        this copyText   function text            var div      special copy            if   div                div   new Element  pre                      id    special copy                    style    opacity  0 position  absolute top  -10000px right  0                               div injectInside document body                     div set  text   text           if  document createRange                var rng   document createRange                rng selectNodeContents div               this saveSelection                   var selection   window getSelection                for  var i   0  i  lt  selection rangeCount  i                      this saveSelection i    selection getRangeAt i                             window getSelection   removeAllRanges                window getSelection   addRange rng               setTimeout this restoreSelection bind this   100             else return alert  Copy did not work                    this getPastedText   function             if   this pastedText  alert  Nothing to paste                return this pastedText              this pasteText   function callback            var div      special paste            if   div                div   new Element  textarea                      id    special paste                    style    opacity  0 position  absolute top  -10000px right  0                               div injectInside document body               div addEvent  keyup   function                     if  this callback                        this pastedText      special paste   get  value                        this callback call null  this pastedText                       this callback   false                      this pastedText   false                      setTimeout this restoreSelection bind this   100                                   bind this                      div set  value                if  document createRange                var rng   document createRange                rng selectNodeContents div               this saveSelection                   var selection   window getSelection                for  var i   0  i  lt  selection rangeCount  i                      this saveSelection i    selection getRangeAt i                             window getSelection   removeAllRanges                window getSelection   addRange rng               div focus                this callback   callback            else return alert  Failed to paste                  Usage  enyby clip   new EnybyClipboard       Init  enyby clip copyText  some text       Place this in the Ctrl C handler and return true   enyby clip pasteText function callback pasted text        alert pasted text          Place this in Ctrl V handler and return true   On paste  it creates a textarea and works the same way  PS  Maybe this solution can be used for creating a full cross-browser solution without Flash  It works in Firefox and Chrome

User · Answer

This is a bit of a combination between the other answers   var copyToClipboard   function textToCopy          body            append     lt textarea name  fname  class  textToCopyInput   gt              val textToCopy            find   textToCopyInput            select          try           var successful   document execCommand  copy            var msg   successful    successful     unsuccessful           alert  Text copied to clipboard             catch  err              window prompt  To copy the text to clipboard  Ctrl C  Enter   textToCopy                    textToCopyInput   remove        It uses jQuery  but it doesn t have to of course  You can change that if you want  I just had jQuery to my disposal  You can also add some CSS to make sure the input doesn t show  For instance something like    textToCopyInput opacity  0  position  absolute     Or of course you could also do some inline styling   append     lt textarea name  fname  style  opacity  0   position  absolute   class  textToCopyInput   gt

User · Answer

ZeroClipboard is the best cross-browser solution I ve found   lt div id  quot copy quot  data-clipboard-text  quot Copy Me  quot  gt Click to copy lt  div gt   lt script src  quot ZeroClipboard js quot  gt  lt  script gt   lt script gt    var clip   new ZeroClipboard  document getElementById  copy       lt  script gt   If you need non-Flash support for iOS you just add a fall-back  clip on   noflash   function   client  args            quot  copy quot   click function            var txt     this  attr  data-clipboard-text            prompt   quot Copy link  then click OK  quot   txt                http   zeroclipboard org  https   github com zeroclipboard ZeroClipboard

User · Answer

From one of the projects I ve been working on  a jQuery copy-to-clipboard plugin that utilizes the ZeroClipboard library  It is easier to use than the native Zero Clipboard plugin if you re a heavy jQuery user

User · Answer

It seems I misread the question  but for reference  you can extract a range of the DOM  not to the clipboard  compatible with all modern browsers   and combine it with the oncopy  onpaste  and onbeforepaste events to get the clipboard behaviour  Here s the code to achieve this  function clipBoard sCommand      var oRange   contentDocument createRange      oRange setStart startNode  startOffset     oRange setEnd endNode  endOffset         This is where the actual selection happens       in the above  startNode and endNode are      DOM nodes defining the beginning and      end of the  quot selection quot  respectively        startOffset and endOffset are constants      that are defined as follows            END TO END  2          END TO START  3          NODE AFTER  1          NODE BEFORE  0          NODE BEFORE AND AFTER  2          NODE INSIDE  3          START TO END  1          START TO START  0       And it would be used like oRange START TO END         switch sCommand         case  quot cut quot         this oFragment   oRange extractContents          oRange collapse          break       case  quot copy quot         this oFragment   oRange cloneContents          break       case  quot paste quot         oRange deleteContents          var cloneFragment   this oFragment cloneNode true        oRange insertNode cloneFragment         oRange collapse          break

User · Answer

Reading and modifying the clipboard from a webpage raises security and privacy concerns  However  in Internet nbsp Explorer  it is possible to do it  I found this example snippet    x000D   x000D       lt script type  text javascript  gt  x000D          function select all obj    x000D              var text val eval obj   x000D              text val focus    x000D              text val select    x000D              r   text val createTextRange    x000D              if   r execCommand  return     feature detection x000D              r execCommand  copy    x000D            x000D       lt  script gt  x000D       lt input value  http   www sajithmr com  x000D       onclick  select all this   name  url  type  text    gt  x000D   x000D   x000D

User · Answer

Automatic copying to the clipboard may be dangerous  and therefore most browsers  except Internet  Explorer  make it very difficult  Personally  I use the following simple trick  function copyToClipboard text      window prompt  quot Copy to clipboard  Ctrl C  Enter quot   text      The user is presented with the prompt box  where the text to be copied is already selected  Now it s enough to press Ctrl   C and Enter  to close the box  -- and voila  Now the clipboard copy operation is safe  because the user does it manually  but in a pretty straightforward way   Of course  it works in all browsers   x000D   x000D   lt button id  demo  onclick  copyToClipboard document getElementById  demo   innerHTML   gt This is what I want to copy lt  button gt    lt script gt    function copyToClipboard text        window prompt  Copy to clipboard  Ctrl C  Enter   text        lt  script gt  x000D   x000D   x000D

User · Answer

Copy text from HTML input to the clipboard    x000D   x000D   function myFunction     x000D        Get the text field    x000D     var copyText   document getElementById  myInput    x000D   x000D        Select the text field    x000D     copyText select    x000D   x000D        Copy the text inside the text field    x000D     document execCommand  Copy    x000D   x000D        Alert the copied text    x000D     alert  Copied the text      copyText value   x000D     x000D    lt  -- The text field -- gt  x000D    lt input type  text  value  Hello Friend  id  myInput  gt  x000D   x000D    lt  -- The button used to copy the text -- gt  x000D   lt button onclick  myFunction    gt Copy text lt  button gt  x000D   x000D   x000D    Note  The document execCommand   method is not supported in Internet Explorer 9 and earlier   Source  W3Schools - Copy Text to Clipboard

User · Answer

It looks like you took the code from Greasemonkey JavaScript Copy to Clipboard button or the original source of this snippet    This code was for Greasemonkey  hence the unsafeWindow  And I guess the syntax error in Internet  Explorer comes from the const keyword which is specific to Firefox  replace it with var

User · Answer

This is a standalone class and ensures no flashing could occur from the temporary textarea by placing it off-screen  This works in Safari  desktop   Firefox  and Chrome                                                                                         ClipboardClass                                                                                     var ClipboardClass    function          function copyText text               Create a temporary element off-screen to hold text          var tempElem       lt textarea style  quot position  absolute  top  -8888px  left  -8888px quot  gt                quot body quot   append tempElem            tempElem val text  select            document execCommand  quot copy quot            tempElem remove                                                                                                       Class API                                                                                         return           copyText  copyText

User · Answer

I have used clipboard js   We can get it on npm   npm install clipboard --save   And also on Bower  bower install clipboard --save   Usage  amp  examples are at https   zenorocha github io clipboard js

User · Answer

It looks like you took the code from Greasemonkey JavaScript Copy to Clipboard button or the original source of this snippet    This code was for Greasemonkey  hence the unsafeWindow  And I guess the syntax error in Internet  Explorer comes from the const keyword which is specific to Firefox  replace it with var

User · Answer

I ve put together what I think is the best one   Uses cssText to avoid exceptions in Internet Explorer as opposed to style directly  Restores selection if there was one Sets read-only so the keyboard doesn t come up on mobile devices Has a workaround for iOS so that it actually works as it normally blocks execCommand   Here it is  const copyToClipboard    function initClipboardText       const textarea   document createElement  textarea          Move it off-screen    textarea style cssText    position  absolute  left  -99999em         Set to readonly to prevent mobile devices opening a keyboard when      text is  select   ed    textarea setAttribute  readonly   true      document body appendChild textarea      return function setClipboardText text        textarea value   text          Check if there is any content selected previously      const selected   document getSelection   rangeCount  gt  0         document getSelection   getRangeAt 0    false          iOS Safari blocks programmatic execCommand copying normally  without this hack         https   stackoverflow com questions 34045777 copy-to-clipboard-using-javascript-in-ios     if  navigator userAgent match  ipad ipod iphone i           const editable   textarea contentEditable        textarea contentEditable   true        const range   document createRange          range selectNodeContents textarea         const sel   window getSelection          sel removeAllRanges          sel addRange range         textarea setSelectionRange 0  999999         textarea contentEditable   editable            else         textarea select               try         const result   document execCommand  copy              Restore previous selection        if  selected            document getSelection   removeAllRanges            document getSelection   addRange selected                  return result            catch  err          console error err         return false                    Usage  copyToClipboard  some text

User · Answer

To copy a selected text   Text To Copy   to your clipboard  create a Bookmarklet  browser bookmark that executes JavaScript  and execute it  click on it   It will create a temporary textarea   Code from GitHub   https   gist github com stefanmaric 2abf96c740191cda3bc7a8b0fc905a7d   function  text      var node   document createElement  textarea      var selection   document getSelection       node textContent   text    document body appendChild node      selection removeAllRanges      node select      document execCommand  copy       selection removeAllRanges      document body removeChild node       Text To Copy

User · Answer

As far as I know that only works in Internet nbsp Explorer   See also Dynamic Tools - JavaScript Copy To Clipboard  but it requires the user to change the configuration first and even then it doesn t seems to work

User · Answer

This solution was found here  The document execCommand  quot copy quot    is not supported on Internet Explorer 8 and earlier     x000D   x000D  const copyBtn    document getElementById  copyBtn    const input   document getElementById  input     function copyText       const value   input value       input select       selects the input variable as the text to be copied   input setSelectionRange 0  99999      this is used to set the selection range for mobile devices      document execCommand  copy       copies the selected text      alert  Copied the text     value      displays the copied text in a prompt    copyBtn onmousedown   function        copyText      x000D   lt input type  text  id  input  placeholder  Type text to copy       gt   lt button id  copyBtn  gt    Copy  lt  button gt  x000D   x000D   x000D

User · Answer

This can be done just by using a combination of getElementbyId  Select    blur   and the copy command   Note  The select   method selects all the text in a  lt textarea  element or an  lt input  element with a text field  This might not work on a button   Usage  let copyText   document getElementById  input-field    copyText select   document execCommand  copy    copyReferal blur   document getElementbyId  help-text   textContent    Copied    The blur   method will remove the ugly highlighted portion instead of that you can show at beautiful message that your content was copied successfully

User · Answer

Simple  ready-to-use and not obsolete solution  function copyToClipboard elementIdToCopy  elementIdToNotifyOutcome        const contentToCopy   document getElementById elementIdToCopy  innerHTML      const elementToNotifyOutcome   document getElementById elementIdToNotifyOutcome        navigator clipboard writeText contentToCopy  then function             elementToNotifyOutcome classList add  success            elementToNotifyOutcome innerHTML    Copied           function             elementToNotifyOutcome classList add  failure            elementToNotifyOutcome innerHTML    Sorry  did not work

User · Answer

Here is an easy example      lt  DOCTYPE html gt   lt html gt       lt body gt           lt input type  text                 value  Hello  World                  id  myInput  gt           lt button onclick  myFunction    gt Copy text lt  button gt            lt p gt The document execCommand   method is not supported            in Internet amp nbsp Explorer amp nbsp 8 and earlier  lt  p gt            lt script gt              function myFunction                     var copyText   document getElementById  myInput                    copyText select                    document execCommand  copy                    alert  Copied the text      copyText value                          lt  script gt       lt  body gt   lt  html gt

User · Answer

It looks like you took the code from Greasemonkey JavaScript Copy to Clipboard button or the original source of this snippet    This code was for Greasemonkey  hence the unsafeWindow  And I guess the syntax error in Internet  Explorer comes from the const keyword which is specific to Firefox  replace it with var

User · Answer

The following approach works in Chrome  Firefox  Internet Explorer and Edge  and in recent versions of Safari  copy support was added in version 10 which was released Oct 2016     Create a textarea and set its contents to the text you want copied to the clipboard  Append the textarea to the DOM  Select the text in the textarea  Call document execCommand  copy   Remove the textarea from the dom    Note  you will not see the textarea  as it is added and removed within the same synchronous invocation of Javascript code   Some things to watch out for if you are implementing this yourself    For security reasons  this can only called from an event handler such as click  Just as with opening windows   Internet Explorer will show a permission dialog the first time the clipboard is updated  Internet Explorer  and Edge will scroll when the textarea is focused  execCommand   may throw in some cases  Newlines and tabs can get swallowed unless you use a textarea   Most articles seem to recommend using a div  The textarea will be visible while the Internet Explorer dialog is shown  you either need to hide it  or use the Internet Explorer specific clipboardData API  In Internet Explorer system administrators can disable the clipboard API    The function below should handle all of the following issues as cleanly as possible  Please leave a comment if you find any problems or have any suggestions for improving it      Copies a string to the clipboard  Must be called from within an    event handler such as click  May return false if it failed  but    this is not always possible  Browser support for Chrome 43      Firefox 42   Safari 10   Edge and Internet Explorer 10      Internet Explorer  The clipboard feature may be disabled by    an administrator  By default a prompt is shown the first    time the clipboard is used  per session   function copyToClipboard text        if  window clipboardData  amp  amp  window clipboardData setData               Internet Explorer-specific code path to prevent textarea being shown while dialog is visible          return clipboardData setData  Text   text              else if  document queryCommandSupported  amp  amp  document queryCommandSupported  copy              var textarea   document createElement  textarea            textarea textContent   text          textarea style position    fixed       Prevent scrolling to bottom of page in Microsoft Edge          document body appendChild textarea           textarea select            try               return document execCommand  copy        Security exception may be thrown by some browsers                    catch  ex                console warn  Copy to clipboard failed    ex               return false                    finally               document body removeChild textarea                       https   jsfiddle net fx6a6n6x

User · Answer

Reading and modifying the clipboard from a webpage raises security and privacy concerns  However  in Internet nbsp Explorer  it is possible to do it  I found this example snippet    x000D   x000D       lt script type  text javascript  gt  x000D          function select all obj    x000D              var text val eval obj   x000D              text val focus    x000D              text val select    x000D              r   text val createTextRange    x000D              if   r execCommand  return     feature detection x000D              r execCommand  copy    x000D            x000D       lt  script gt  x000D       lt input value  http   www sajithmr com  x000D       onclick  select all this   name  url  type  text    gt  x000D   x000D   x000D

User · Answer

The other methods will copy plain text to the clipboard  To copy HTML  i e   you can paste results into a WYSIWYG editor   you can do the following in Internet  Explorer only  This is is fundamentally different from the other methods  as the browser actually visibly selects the content     Create an editable DIV and append the HTML content you want copied var editableDiv   document createElement  quot div quot    with  editableDiv        contentEditable   true    editableDiv appendChild someContentElement       Select the editable content and copy it to the clipboard var r   document body createTextRange    r moveToElementText editableDiv   r select    r execCommand  quot Copy quot        Deselect  so the browser doesn t leave the element visibly selected r moveToElementText someHiddenDiv   r select

User · Answer

I found the following solution   I have the text in a hidden input  Because setSelectionRange doesn t work on hidden inputs  I changed temporarily the type to text  copied the text  and then made it hidden again  If you want to copy the text from an element  you can pass it to the function and save its content in the target variable   jQuery   copy   on  click   function          copyToClipboard         function copyToClipboard         var target   jQuery   hidden text            Make it visible  so can be focused     target attr  type    text        target focus           Select all the text     target 0  setSelectionRange 0  target val   length           Copy the selection     var succeed      try           succeed   document execCommand  copy              catch  e            succeed   false                Hide input again     target attr  type    hidden         return succeed

User · Answer

There are many answers already  however like to add one  jQuery   Works great on any browser  also mobile ones  i e   prompts about security  but when you accept it just works fine    function appCopyToClipBoard sText        var oText   false          bResult   false      try               oText   document createElement  textarea              oText  addClass  clipboardCopier   val sText  insertAfter  body   focus            oText select            document execCommand  Copy            bResult   true            catch e                 oText  remove        return bResult      In your code   if   appCopyToClipBoard  Hai there  This is copied to the clipboard           alert  Sorry  copy to clipboard failed

[javascript] How do I copy to the clipboard in JavaScript?

Examples related to javascript

Examples related to clipboard

Examples related to copy-paste