-
-
Save anacampesan/d42354f45e172519c0be3cead34fe869 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div id="secretInfo" style="display: none;">secret info</div> | |
| <button type="button" id="btnCopy">Copy hidden info</button> | |
| <script type="text/javascript"> | |
| var $body = document.getElementsByTagName('body')[0]; | |
| var $btnCopy = document.getElementById('btnCopy'); | |
| var secretInfo = document.getElementById('secretInfo').innerHTML; | |
| var copyToClipboard = function(secretInfo) { | |
| var $tempInput = document.createElement('INPUT'); | |
| $body.appendChild($tempInput); | |
| $tempInput.setAttribute('value', secretInfo) | |
| $tempInput.select(); | |
| document.execCommand('copy'); | |
| $body.removeChild($tempInput); | |
| } | |
| $btnCopy.addEventListener('click', function(ev) { | |
| copyToClipboard(secretInfo); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
i've used this idea and transformed it into a universal thing, requires jQuery tho, but is easy to be done with vanilla js. give
rel=targetand then it will copy it wrong wherever you want.<div id="copyText">asdasdasdas</div> <a href="#", class="copy-me", rel="copyText"></a> $(document).on("click", ".copy-me", function(ev) { var $body = document.getElementsByTagName('body')[0]; var rel = $(this).attr("rel"); var text = $("#"+rel).text(); var $tempInput = document.createElement('INPUT'); $body.appendChild($tempInput); $tempInput.setAttribute('value', text) $tempInput.select(); document.execCommand('copy'); $body.removeChild($tempInput); });
Hi there. I tried it and it don't copy anything. Checked ID, classes and all the code, no console errors. Do you use that code like you posted?
Thanks for your time!
but a log in between each line and see where it fails?
@gresbtim Well I trying to use it on a modal div. I see that I can use focus() before select() in order to work but it makes a jump in the screen that I really don't like.
I tried some different variations (the exactly posted too, of course). That's my actual code:
$("#copythat").tooltip();
$("#copythat").on('click', function(event) {
event.preventDefault();
var tooltip = $(this);
tooltip.attr('data-original-title', 'Copied!');
$("#copythat").tooltip('show');
var copying = "sometexttocopy";
var copying = $('<input>').val(copying).appendTo('body').select()
document.execCommand('copy');
$(copying).remove();
});
<a id="copythat" href="#" data-toggle="tooltip" data-placement="top" title="Copy?">sometextwaitingforaclick</a>
Do you see anything bad? Or maybe have some suggestion to add focus() and avoid screen jumping?
Thanks!
thanks.