html - Click button copy to clipboard using jQuery -
how copy text inside div clipboard? have div , need add link add text clipboard. there solution this?
<p class="content">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s</p> <a class="copy-text">copy text</a> after click copy text, press ctrl + v, must pasted.
edit of 2016
as of 2016, can copy text clipboard in browsers because browsers have ability programmatically copy selection of text clipboard using document.execcommand("copy") works off selection.
as other actions in browser (like opening new window), copy clipboard can done via specific user action (like mouse click). example, cannot done via timer.
here's code example:
document.getelementbyid("copybutton").addeventlistener("click", function() { copytoclipboard(document.getelementbyid("copytarget")); }); function copytoclipboard(elem) { // create hidden text element, if doesn't exist var targetid = "_hiddencopytext_"; var isinput = elem.tagname === "input" || elem.tagname === "textarea"; var origselectionstart, origselectionend; if (isinput) { // can use original source element selection , copy target = elem; origselectionstart = elem.selectionstart; origselectionend = elem.selectionend; } else { // must use temporary form element selection , copy target = document.getelementbyid(targetid); if (!target) { var target = document.createelement("textarea"); target.style.position = "absolute"; target.style.left = "-9999px"; target.style.top = "0"; target.id = targetid; document.body.appendchild(target); } target.textcontent = elem.textcontent; } // select content var currentfocus = document.activeelement; target.focus(); target.setselectionrange(0, target.value.length); // copy selection var succeed; try { succeed = document.execcommand("copy"); } catch(e) { succeed = false; } // restore original focus if (currentfocus && typeof currentfocus.focus === "function") { currentfocus.focus(); } if (isinput) { // restore prior selection elem.setselectionrange(origselectionstart, origselectionend); } else { // clear temporary content target.textcontent = ""; } return succeed; }input { width: 400px; }<input type="text" id="copytarget" value="text copy"> <button id="copybutton">copy</button><br><br> <input type="text" placeholder="click here , press ctrl-v see clipboard contents">here's little more advanced demo: https://jsfiddle.net/jfriend00/v9g1x0o6/
and, can pre-built library clipboard.js.
old, historical part of answer
directly copying clipboard via javascript not permitted modern browser security reasons. common workaround use flash capability copying clipboard can triggered direct user click.
as mentioned already, zeroclipboard popular set of code managing flash object copy. i've used it. if flash installed on browsing device (which rules out mobile or tablet), works.
the next common work-around place clipboard-bound text input field, move focus field , advise user press ctrl + c copy text.
other discussions of issue , possible work-arounds can found in these prior stack overflow posts:
these questions asking modern alternative using flash have received lots of question upvotes , no answers solution (probably because none exist):
internet explorer , firefox used have non-standard apis accessing clipboard, more modern versions have deprecated methods (probably security reasons).
there nascent standards effort try come "safe" way solve common clipboard problems (probably requiring specific user action flash solution requires), , looks may partially implemented in latest versions of firefox , chrome, haven't confirmed yet.
Comments
Post a Comment