title: Using execCommand (Javascript) to copy hidden text to clipboard
body: <p>I'm trying to copy to clipboard without using Flash, I plan to fall back onto Flash with the use of <a href="http://zeroclipboard.org/" rel="noreferrer">ZeroClipboard</a> if the browser is incompatible with the javascript approach.</p>
  <p>I have an onClick listener for the button which looks like:</p>
  <pre><code>$(buttonWhereActionWillBeTriggered).click(function(){ 
      var copyDiv = document.getElementById(inputContainingTextToBeCopied);
      copyDiv.focus();
      document.execCommand('SelectAll');
      document.execCommand(&quot;Copy&quot;, false, null);
  }
  </code></pre>
  <p>and an input field as follows:</p>
  <pre><code>&lt;input type=&quot;text&quot; name=&quot;Element To Be Copied&quot; id=&quot;inputContainingTextToBeCopied&quot; value=&quot;foo&quot;/&gt;
  </code></pre>
  <p>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 <code>type=&quot;hidden&quot;</code> and <code>style=&quot;display: none&quot;</code> neither of which have succeeded. Both result in the button selecting the whole page and copying the whole content to the user's clipboard.<br />
  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.</p>
  <p>Is there a way that I can maintain the functionality of when the &lt; input&gt; is visible whilst hiding it? or if not an alternate route I can take?</p>
  <hr />
  <p>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. <a href="https://stackoverflow.com/a/22581382/4323812">Here's a good answer</a> for anyone having similar, less specific issues.</p>