Skip to content

Instantly share code, notes, and snippets.

@anacampesan

anacampesan/copyToClipboard.html

Last active May 20, 2021 10:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anacampesan/d42354f45e172519c0be3cead34fe869 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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>
@gresbtim

gresbtim commented Apr 28, 2020

Copy link
Copy Markdown

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

@renguer0

@renguer0

renguer0 commented Apr 28, 2020 •
edited
Loading

Copy link
Copy Markdown

@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