javascript - Copy to clipboard buttons -
i want create "copy clipboard" buttons work on our sharepoint. should placed in few different places, , need copy text from specific field on page (ex. list of emails).
i know, can select text , copy it, quite often, having button automatically copies text clipboard useful.
i did manage create 1 in script editor, pasted whole code below (which found on internet)
<!doctype html> <html> <head> <script type='text/javascript'>//<![cdata[ window.onload=function(){ document.getelementbyid("copybutton").addeventlistener("click", function() { copytoclipboardmsg(document.getelementbyid("copytarget"), "msg"); }); document.getelementbyid("copybutton2").addeventlistener("click", function() { copytoclipboardmsg(document.getelementbyid("copytarget2"), "msg"); }); document.getelementbyid("pastetarget").addeventlistener("mousedown", function() { this.value = ""; }); function copytoclipboardmsg(elem, msgelem) { var succeed = copytoclipboard(elem); var msg; if (!succeed) { msg = "copy not supported or blocked. press ctrl+c copy." } else { msg = "text copied clipboard." } if (typeof msgelem === "string") { msgelem = document.getelementbyid(msgelem); } msgelem.innerhtml = msg; settimeout(function() { msgelem.innerhtml = ""; }, 2000); } 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; } }//]]> </script> </head> <body> <input id="copytarget" value="some initial text"> <button id="copybutton">copy</button><br><br> <span id="copytarget2">some other text</span> <button id="copybutton2">copy</button><br><br> <input id="pastetarget"> click in field , hit ctrl+v see on clipboard<br><br> <span id="msg"></span><br> </body> </html>
but have main problems it: 1) reloads page every time click "copy" button 2) not elegant , friendly, when think updating our documents
i grateful hints may have me, on how make work better.
this project may help: clipboardjs
Comments
Post a Comment