Skip to content

Instantly share code, notes, and snippets.

@anacampesan
Last active May 20, 2021 10:41
Show Gist options
  • Save anacampesan/d42354f45e172519c0be3cead34fe869 to your computer and use it in GitHub Desktop.
Save anacampesan/d42354f45e172519c0be3cead34fe869 to your computer and use it in GitHub Desktop.
Copy to clipboard without input
<!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>
@faryar76
Copy link

thanks

@dev-rishi-witbybit
Copy link

thanks

@iphiow
Copy link

iphiow commented Apr 25, 2019

Thanks a lot !!!

@krtschmr
Copy link

krtschmr commented Oct 4, 2019

sweet

@krtschmr
Copy link

krtschmr commented Oct 4, 2019

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=target and 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);
});

@Excellingp
Copy link

thanks, this really helped alot.

@jemoh
Copy link

jemoh commented Nov 20, 2019

This one really helped me

@NicholusMuwonge
Copy link

Wow, this really helped me

@ThePixelPixie
Copy link

This helped me tons! Thanks! Now if I could just figure out how to display a popover confirmation that the item was copied, it'd be perfect!

@guillermoromo
Copy link

thank you!!!! this really helped me!!

@Passio777
Copy link

thanks.

@renguer0
Copy link

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=target and 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!

@gresbtim
Copy link

but a log in between each line and see where it fails?

@renguer0

@renguer0
Copy link

renguer0 commented Apr 28, 2020

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment