jquery - Using execCommand (Javascript) to copy hidden text to clipboard -

i'm trying copy clipboard without using flash, plan fall onto flash use of zeroclipboard if browser incompatible javascript approach.

i have onclick listener button looks like:

$(buttonwhereactionwillbetriggered).click(function(){      var copydiv = document.getelementbyid(inputcontainingtexttobecopied);     copydiv.focus();     document.execcommand('selectall');     document.execcommand("copy", false, null); } 

and input field follows:

<input type="text" name="element copied" id="inputcontainingtexttobecopied" value="foo"/> 

this works expected design requires field containing text copied invisible. have tried both setting type="hidden" , style="display: none" neither of have succeeded. both resulting in button selecting whole page , copying whole content user's clipboard.
i'm relatively confident cause not browser based incase, testing on chrome (version 43.0.2357.134 (64-bit)) on mac os x 10.10.4.

is there way can maintain functionality of when < input> visible whilst hiding it? or if not alternate route can take?

---

i'm aware of similar questions, none of address problem, either being old, not using javascript or not fitting particular scenario. here's answer having similar, less specific issues.

--update--

document.execcommand()

[1] before firefox 41, clipboard capability needed enabled in user.js preference file. see brief guide mozilla preferences more information. if command wasn't supported or enabled, execcommand raising exception instead of returning false.in firefox 41 , later, clipboard capability enabled default in event handler able pop-up window (semi-trusted scripts).

since firefox version 41 document.execcommand() works. no need use fallback anymore.

---

since browsers seem behave differently when comes clipboard access, took me while head around it.

it's pretty similar solution, difference create temporary element , fill input value. way can keep input's display property set none.

there workaround ie uses window.clipboarddata.

firefox not let me access clipboard @ all. had add prompt let users manually copy input value. sure prompt ugly, use modal window, same.

since seems knotty thing, on win7 (64 bit) , tested in

chrome - version 43.0.2357.134 m

ie - version 11.0.9600.17914

and firefox irrelevant, because not let me access anyway.

var copybtn   = $("#copy-btn"),      input     = $("#copy-me");    function copytoclipboardff(text) {    window.prompt ("copy clipboard: ctrl c, enter", text);  }    function copytoclipboard() {    var success   = true,        range     = document.createrange(),        selection;      // ie.    if (window.clipboarddata) {      window.clipboarddata.setdata("text", input.val());            } else {      // create temporary element off screen.      var tmpelem = $('<div>');      tmpelem.css({        position: "absolute",        left:     "-1000px",        top:      "-1000px",      });      // add input value 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 on clipboard, try 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 copied" id="copy-me" value="foo loves bar"/>  <button id="copy-btn">copy</button><br/><br/>  <textarea placeholder="paste here"></textarea>