Copy to Clipboard for all Browsers using javascript

Question

I was trying to make  Copy to Clipboard  work on all browsers but no luck   Am using javascript and I don t want to use Zero Clipboard to do   Please let us know what wrong in my code   Appreciate for your help   Below is the code  Currently my code is working only on IE browser  -    lt script type  text javascript  gt  function copyToClipboard s        if  window clipboardData  amp  amp  clipboardData setData                 clipboardData setData  Text   s             else                  You have to sign the code to enable this or allow the action in about config by changing         user pref  signed applets codebase principal support   true           netscape security PrivilegeManager enablePrivilege  UniversalXPConnect             var clip   Components classes   mozilla org widget clipboard     1       createInstance Components interfaces nsIClipboard           if   clip  return              create a transferable         var trans   Components classes   mozilla org widget transferable     1       createInstance Components interfaces nsITransferable           if   trans  return              specify the data we wish to handle  Plaintext in this case          trans addDataFlavor  text unicode                To get the data from the transferable we need two new objects         var str   new Object            var len   new Object             var str   Components classes   mozilla org supports-string     1       createInstance Components interfaces nsISupportsString            var copytext meintext           str data copytext           trans setTransferData  text unicode  str copytext length     2                var clipid Components interfaces nsIClipboard           if   clip  return false           clip setData trans null clipid kGlobalClipboard                  lt  script gt    lt textarea id  testText  rows  10  cols  100  gt Enter your Sample text lt  textarea gt  lt br   gt   lt button onclick  copyToClipboard document getElementById  testText   value     gt clipboard lt  button gt  lt br   gt  lt br   gt   lt textarea rows  10  cols  100  gt Paste your text here lt  textarea gt  lt br   gt

User · Answer

For security reasons most browsers do not allow to modify the clipboard  except IE  of course       The only way to make a copy-to-clipboard function cross-browser compatible is to use Flash

User · Answer

I spent a lot of time looking for a solution to this problem too  Here s what i ve found thus far   If you want your users to be able to click on a button and copy some text  you may have to use Flash   If you want your users to press Ctrl C anywhere on the page  but always copy xyz to the clipboard  I wrote an all-JS solution in YUI3  although it could easily be ported to other frameworks  or raw JS if you re feeling particularly self-loathing    It involves creating a textbox off the screen which gets highlighted as soon as the user hits Ctrl CMD  When they hit  C  shortly after  they copy the hidden text  If they hit  V   they get redirected to a container  of your choice  before the paste event fires   This method can work well  because while you listen for the Ctrl CMD keydown anywhere in the body  the  A    C  or  V  keydown listeners only attach to the hidden text box  and not the whole body    It also doesn t have to break the users expectations - you only get redirected to the hidden box if you had nothing selected to copy anyway   Here s what i ve got working on my site  but check http   at cg js clipboard js for updates if there are any   YUI add  clipboard   function Y         Change this to the id of the text area you would like to always paste in to   pasteBox   Y one   pasteDIV         Make a hidden textbox somewhere off the page   Y one  body   append   lt input id  copyBox  type  text  name  result  style  position fixed  top -20    onkeyup  pasteBox focus    gt     copyBox   Y one   copyBox         Key bindings for Ctrl A  Ctrl C  Ctrl V  etc      Catch Ctrl Window Apple keydown anywhere on the page  Y on  key   function e        copyData                Uncomment below alert and remove keyCodes after  down   to figure out keyCodes for other buttons              alert e keyCode                   body     down    Y       body     down 91 224 17   Y       Catch V - BUT ONLY WHEN PRESSED IN THE copyBox    Y on  key   function e           Oh no  The user wants to paste  but their about to paste into the hidden  copyBox          Luckily  pastes happen on keyPress  which is why if you hold down the V you get lots of pastes   and we caught the V on keyDown  before keyPress          Thus  if we re quick  we can redirect the user to the right box and they can unload their paste into the appropriate container  phew      pasteBox select         copyBox     down 86   Y       Catch A - BUT ONLY WHEN PRESSED IN THE copyBox    Y on  key   function e           User wants to select all - but he she is in the hidden  copyBox  That wont do   select the pasteBox instead  which is probably where they wanted to be       pasteBox select         copyBox     down 65   Y         What to do when keybindings are fired      User has pressed Ctrl Meta  and is probably about to press A C or V  If they ve got nothing selected  or have selected what you want them to copy  redirect to the hidden copyBox  function copyData         var txt              props to Sabarinathan Arthanari for sharing with the world how to get the selected text on a page  cheers mate          if  window getSelection    txt   window getSelection              else if  document getSelection    txt   document getSelection              else if  document selection    txt   document selection createRange   text            else alert  Something went wrong and I have no idea why - please contact me with your browser type  Firefox  Safari  etc  and what you tried to copy and I will fix this immediately             If the user has nothing selected after pressing Ctrl Meta  they might want to copy what you want them to copy           if txt                        copyBox select                     They also might have manually selected what you wanted them to copy  How unnecessary  Maybe now is the time to tell them how silly they are             else if  txt    copyBox get  value              alert  This site uses advanced copy paste technology  possibly from the future  n  nYou do not need to select things manually - just press Ctrl C   n  n Ctrl V will always paste to the main box too                      copyBox select              else                      They also might have selected something completely different  If so  let them  It s only fair                    Hope someone else finds this useful

User · Answer

This works on firefox 3 6 x and IE       function copyToClipboardCrossbrowser s                       s   document getElementById s  value                          if  window clipboardData  amp  amp  clipboardData setData                         clipboardData setData  Text   s                                else                          You have to sign the code to enable this or allow the action in about config by changing               user pref  signed applets codebase principal support   true               netscape security PrivilegeManager enablePrivilege  UniversalXPConnect                 var clip   Components classes   mozilla org widget clipboard 1   createInstance Components interfaces nsIClipboard               if   clip  return                  create a transferable              var trans   Components classes   mozilla org widget transferable 1   createInstance Components interfaces nsITransferable               if   trans  return                  specify the data we wish to handle  Plaintext in this case              trans addDataFlavor  text unicode                    To get the data from the transferable we need two new objects             var str   new Object                var len   new Object                 var str   Components classes   mozilla org supports-string 1   createInstance Components interfaces nsISupportsString                str data  s                       trans setTransferData  text unicode  str  str data length   2                var clipid Components interfaces nsIClipboard                            if   clip  return false              clip setData trans null clipid kGlobalClipboard

User · Answer

I think zeroclipboard is great  this version work with latest Flash 11  http   www itjungles com javascript javascript-easy-cross-browser-copy-to-clipboard-solution

[javascript] Copy to Clipboard for all Browsers using javascript

Examples related to javascript

Examples related to clipboard