document.execCommand('copy') doesn't work in firefox for codemirror textarea field

Question

I am using a custom confirmation dialogue with a textarea(codemirror) on it with some text populated. As code mirrors hides the actual textarea element, firefox is not able to get the data from the hidden textarea field. The definition for the confirmation box goes like below:

var confirmationDialog = MD.ui.dialogs.confirm({
    title: title,
    text: '',
    type: 'dataUri',
    dataUri: formUrl,
    position: 'center',
    buttonForward: {
        text: 'Copy',
        action: function () {
            DataGridExportDialog.CopyToClipboard("#rawXmlImpExp");
        }
    },
    buttonCancel: {
        text: 'Cancel',
        action: function () {
            confirmationDialog.close();
            confirmationDialog.destroy();
        }
    }
});

According to the requirement I have updated the confirm button functionality with copy to clipboard functionality so that on clicking on 'Copy' the text in the textarea should be copied to clipboard. Below is the copyToClipboard().

DataGridExportDialog.CopyToClipboard = function( containerId ) {
/*var textareaData = $('#rawXmlImpExp').val();
var range = document.createRange();
range.selectNodeContents(textareaData);
window.getSelection().addRange(range);*/

var copyTextarea = document.querySelector(containerId);
copyTextarea.select();

try {
    var successful = document.execCommand('copy');
    raiseMessage('Configuration XML copied to clip board.')
} catch (err) {
    raiseWarning('Unable to copy. Please do so manually.');
}}

This implementation works fine on chrome but fails in firefox. Any ideas where my code fails on firefox.

Have you tried [this](https://stackoverflow.com/questions/30078763/how-can-i-copy-text-in-one-click-in-mozilla-firefox)? — Rory McCrossan, Nov 29 '17 at 10:35
@RoryMcCrossan: I have gone through that question, but could not add the eventListener to the confirm button. Please share if any ideas on it. — santoshM, Nov 29 '17 at 10:38
check your browser compatibility firefox 41 and above support 'copy/cut' — zabusa, Nov 29 '17 at 10:40
Your code looks ok. Just tested on FireFox 57.0 a very similar code to yours: `var mytext=$(".DTE_Body.modal-body").text(); $("body").append("https://app.e-clean.co.uk//report.php?hash="+rep_link+""); $("#clipboard_holder").select(); document.execCommand('copy');` and it worked without any problem. Are you sure you are not missing something else? — Emil Borconi, Nov 29 '17 at 11:02
@EmilBorconi: Not sure if I am missing anything which is really needed for firefox. Your code is very similar to my code and please be informed that my code works fine on chrome browser. — santoshM, Nov 29 '17 at 11:13
@santoshM Just as a suggestion, since you are already using jQuery try something like this: `$("#rawXmlImpExp").select(); document.execCommand('copy');` directly and see if it works. Can it be possible that the ID is not unique by any chance that will make querySelector behave differently. — Emil Borconi, Nov 29 '17 at 11:16
@EmilBorconi: Yeah, I tried this with no result. What I found is, in firefox the querySelector() returns some additional information about innerHTML, outerHTM and firstElement, etc. Where as in chrome it returns just the element html content. Can we make the querySelector() browser compatible anyways. — santoshM, Nov 30 '17 at 06:41
@EmilBorconi Here document.querySelector() returns string in firefox and object in chrome. — santoshM, Nov 30 '17 at 09:29
@santoshM to my understanding the QuerySelector should return the whole element not just the html content as per: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector. — Emil Borconi, Nov 30 '17 at 09:43
@EmilBorconi: Yeah that's correct. Here I would like to extend my question. The finding is, the textarea I am using is overridden by codemirror for adding xml syntaxing to the text. As codemirror hides the actual html textarea and builds a new text area on top of it. Firefox fails to get the data from hidden textarea. Is there any way to get the data associated with a hidden textfield. — santoshM, Dec 01 '17 at 09:24
@santoshM - try a dirty trick, make it visible but set height and width to 0, then try to select the text, see if that works. — Emil Borconi, Dec 01 '17 at 09:41
@EmilBorconi: Yeah did something like that and posted in the answers. Thanks for the time and help.. :) — santoshM, Dec 04 '17 at 08:27

score 1 · Accepted Answer · answered Dec 04 '17 at 08:32

Unhided the textarea in try block and hidden the same in finally block.

CopyToClipboard = function( containerId ) {
  const copyTextarea = $(containerId);
  try {
    $(copyTextarea).css('display','block');
    copyTextarea[0].select();
    document.execCommand('copy');
    raiseMessage('Configuration XML copied to clip board.');
  } 
  catch (err) {
    raiseWarning('Unable to copy. Please do so manually.');
  }
  finally {
    $(copyTextarea).css('display','none');
  }
}

document.execCommand('copy') doesn't work in firefox for codemirror textarea field

1 Answers1