Skip to content

Instantly share code, notes, and snippets.

@anacampesan

anacampesan/copyToClipboard.html

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.
Download ZIP
Copy to clipboard without input
Raw
copyToClipboard.html
<!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>
@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 •
edited
Loading

@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