Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Copy to clipboard with Javascript in Firefox

I really need a way to copy some text to the OS clipboard in Firefox.

Know it is easy in IE and not possible in Chrome and Opera unless flash is used. Because of different reasons I am unable to use the flash solution!

Had it working in the past but now the netscape.security.PrivilegeManager.enablePrivilege is protected as far as I can figure out (since ver. 17).

It looks as if it is still possible according to this article:

https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Believe it is still necessary to enable the possibility in the user.js file like this

user_pref("capability.policy.policynames", "allowclipboard");
user_pref("capability.policy.allowclipboard.sites", "http://");
user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); 

But how shall I do it? Have made some test without great success and think there is no guide on the web that explain how it shall be done in a generic way. E.g. a simple guide about how to enable javascript access to the clipboard. Hopefully also a guide that can be used by the novice user. Like to do it and post it here but need a working solution first.

According to the web there are 2 solutions for copy to clipboard;

document.execCommand("copy", false, null) 

and

var gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
  gClipboardHelper.copyString("Put me on the clipboard, please.");

Both generate a failure with my first try.

The solution below need the user to press CTRL+C and I need a solution where the text shall copy based on the press of a button (many on a single page).

https://stackoverflow.com/questions/4344325/copy-to-clipboard-on-firefox-and-google-chrome/11346026#11346026

My old solution was like this:

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);

if(clip)
{
  var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);

  if(trans)
  {
    var str = new Object();
    var len = new Object();
    var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

    if(str)
    {
      var clipid=Components.interfaces.nsIClipboard;

      if(clipid)
      {                 
        str.data = cliptext;

        trans.addDataFlavor('text/unicode');                    
        trans.setTransferData("text/unicode", str, cliptext.length*2);      

        clip.setData(trans, null, clipid.kGlobalClipboard); // No return value
        return 0;
      }
    }
  }
}

Components.classes is undefined in unprivileged code (not add-on etc) so I do not believe any solution with this will work any more. One option is to make an add-on that will execute in privileged code area and send the text that shall be copied to this add-on for it to handle the copy to the OS clipboard (nice new possible project).

This only leave document.execCommand("copy", false, null) in the field as a stand alone solution.

Tried this code and it does not copy anything to the OS clipboard - but do not generate any errors btw.

var pre = document.getElementById('pcryptcopytext');

if(!pre)
{
  pre = document.createElement("pre");
  pre.setAttribute('id', 'pcryptcopytext');
  pre.setAttribute('style', 'opacity: 0; position: absolute; top: -10000px; right: 0;');
  document.body.appendChild(pre);
}

pre.innerHTML = cliptext;
pre.contentEditable = true;
//pre.unselectable = "off";
//pre.focus();

if (document.createRange) 
{
  var rng = document.createRange();
  rng.selectNodeContents(pre);
  document.execCommand("copy", false, null);
  document.body.removeChild(pre);
}

So, anybody got a working solution?

like image 475
Beast Avatar asked Feb 11 '14 07:02

Beast


People also ask

How do I paste from clipboard in JavaScript?

clipboard to get access to the clipboard. Use writeText() to copy text into the clipboard. Use readText() to paste the text. Make sure you have given browser permissions for Clipboard to avoid Promise rejections.

Can JavaScript copy to clipboard?

To copy text with the new Clipboard API, you will use the asynchronous writeText() method. This method accepts only one parameter - the text to copy to your clipboard. This can be a string, a template literal holding variables and other strings, or a variable used to hold a string.


1 Answers

Looks like this is not supported any more, and there is no replacement :(

https://support.mozilla.org/en-US/questions/977068#answer-500083

Maybe making some noise in a Firefox bug will help us get a (safe) solution.

like image 68
nh2 Avatar answered Sep 22 '22 21:09

nh2