--Update--

Question

143

Using execCommand (Javascript) to copy hidden text to clipboard

rated 0 times [ 144] [ 1] / answers: 1 / hits: 110886 / 9 Years ago, thu, july 23, 2015, 12:00:00

I'm trying to copy to clipboard without using Flash, I plan to fall back onto Flash with the use of ZeroClipboard if the browser is incompatible with the javascript approach.

I have an onClick listener for the button which looks like:

$(buttonWhereActionWillBeTriggered).click(function(){ 

    var copyDiv = document.getElementById(inputContainingTextToBeCopied);

    copyDiv.focus();

    document.execCommand('SelectAll');

    document.execCommand("Copy", false, null);

}

and an input field as follows:

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo"/>

This currently works as expected but the design requires that the field containing the text to be copied is invisible. I have tried both setting type="hidden" and style="display: none" neither of which have succeeded. Both result in the button selecting the whole page and copying the whole content to the user's clipboard.

I'm relatively confident the cause is not browser-based but just in case, I am testing on Chrome (Version 43.0.2357.134 (64-bit)) on Mac OS X 10.10.4.

Is there a way that I can maintain the functionality of when the < input> is visible whilst hiding it? or if not an alternate route I can take?

I'm aware of similar questions, none of which address my problem, either from being too old, not actually using Javascript, or not fitting the particular scenario. Here's a good answer for anyone having similar, less specific issues.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cruzs

Add To Favorites

Follow

Total Points: 710

Total Questions: 113

Total Answers: 100

Location: Nepal

Member since Sat, Jul 18, 2020

4 Years ago

cruzs questions

1 How do I use JavaScript fetch in Laravel 8?

Thu, Nov 26, 20, 00:00, 4 Years ago

1 Print PDF from BLOB

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Best practice for Next.js data fetching inside a component

Wed, Aug 19, 20, 00:00, 4 Years ago

1 Not getting form data in req.body Express/node.js

Sun, Aug 2, 20, 00:00, 4 Years ago

1 React Router history.goBack doesn't work when using < Redirect />

Sun, Jul 12, 20, 00:00, 4 Years ago

View All

answered 9 Years ago shaina · Accepted Answer

--Update--

Document.execCommand()

[1] Before Firefox 41, clipboard capability needed to be enabled in the user.js preference file. See A brief guide to Mozilla preferences for more information. If the command wasn't supported or enabled, execCommand was raising an exception instead of returning false. In Firefox 41 and later, clipboard capability is enabled by default in any event handler that is able to pop-up a window (semi-trusted scripts).

Since Firefox version 41 Document.execCommand() now works. So no need to use a fallback anymore.

Since browsers seem to behave differently when it comes to clipboard access,
it took me a while to get my head around it.

It's pretty similar to your solution, but the difference is to create a temporary element and fill it with the input value. That way we can keep the input's display property set to none.

There is also a workaround for IE which uses window.clipboardData.

Firefox would not let me access the clipboard at all. So I had to add a prompt to let users manually copy the input value. Sure a prompt is ugly, but you could just use a modal like a window, which would do the same.

Since this seems to be a knotty thing, I am on Win7 (64 bit) and tested in

Chrome - Version 43.0.2357.134 m

IE - Version 11.0.9600.17914

~~and Firefox is irrelevant because it would not let me access it anyway.~~

var copyBtn   = $(#copy-btn),

    input     = $(#copy-me);



function copyToClipboardFF(text) {

  window.prompt (Copy to clipboard: Ctrl C, Enter, text);

}



function copyToClipboard() {

  var success   = true,

      range     = document.createRange(),

      selection;



  // For IE.

  if (window.clipboardData) {

    window.clipboardData.setData(Text, input.val());        

  } else {

    // Create a temporary element off screen.

    var tmpElem = $('<div>');

    tmpElem.css({

      position: absolute,

      left:     -1000px,

      top:      -1000px,

    });

    // Add the input value to the temp element.

    tmpElem.text(input.val());

    $(body).append(tmpElem);

    // Select temp element.

    range.selectNodeContents(tmpElem.get(0));

    selection = window.getSelection ();

    selection.removeAllRanges ();

    selection.addRange (range);

    // Lets copy.

    try { 

      success = document.execCommand (copy, false, null);

    }

    catch (e) {

      copyToClipboardFF(input.val());

    }

    if (success) {

      alert (The text is on the clipboard, try to paste it!);

      // remove temp element.

      tmpElem.remove();

    }

  }

}



copyBtn.on('click', copyToClipboard);

#copy-me {

    display:none

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<input type=text name=Element To Be Copied id=copy-me value=foo loves bar/>

<button id=copy-btn>Copy</button><br/><br/>

<textarea placeholder=paste here></textarea>