html - Click button copy to clipboard using jQuery -



html - Click button copy to clipboard using jQuery -

how re-create text within div clipboard? have div , need add together link add together 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 re-create text, press ctrl + v, must pasted.

edit of 2016

as of 2016, can re-create text clipboard in browsers (everywhere except safari) because browsers have ability programmatically re-create selection of text clipboard using document.execcommand("copy") works off selection.

as other actions in browser (like opening new window), re-create clipboard can done via specific user action (like mouse click). example, cannot done via timer.

here's code example:

class="snippet-code-js lang-js prettyprint-override">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 utilize original source element selection , re-create target = elem; origselectionstart = elem.selectionstart; origselectionend = elem.selectionend; } else { // must utilize temporary form element selection , re-create 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); // re-create selection var succeed; seek { 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 = ""; } homecoming succeed; } class="snippet-code-css lang-css prettyprint-override">input { width: 400px; } class="snippet-code-html lang-html prettyprint-override"><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. mutual workaround utilize 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 mutual work-around place clipboard-bound text input field, move focus field , advise user press ctrl + c re-create text.

other discussions of issue , possible work-arounds can found in these prior stack overflow posts:

how re-create clipboard in javascript?

how re-create text client's clipboard using jquery?

how can re-create clipboard without flash?

these questions asking modern alternative using flash have received lots of question upvotes , no answers solution (probably because none exist):

html5 alternative flash-based zeroclipboard safe copying of info clipboard?

copy clipboard without flash

internet explorer , firefox used have non-standard apis accessing clipboard, more modern versions have deprecated methods (probably security reasons).

there nascent standards effort seek come "safe" way solve mutual clipboard problems (probably requiring specific user action flash solution requires), , looks may partially implemented in latest versions of firefox , chrome, haven't confirmed yet.

jquery html css

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more