How to Copy to Clipboard in Javascript

This post shows how to copy to clipboard in javascript.

Manual Method

Automatic copying to clipboard may be dangerous, therefore most browsers (except IE) make it very difficult. You could use the following function to for copy to clipboard functionality.

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

The user is presented with the prompt box, where the text to be copied is already selected. Now it’s enough to press Ctrl+C and Enter to close the box. This works across all browsers and can be used in the following way.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>

Automatic Method

The JavaScript document.execCommand('copy') can also be used to copy to clipboard. Here’s the javascript function that you could use:

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

And here’s how it can be used in HTML.

<p> <textarea class="js-copytextarea">Hello I'm some text</textarea></p>
<p><button class="js-textareacopybtn">Copy Textarea</button></p>

In some cases you might wish to copy text to the clipboard without displaying an input / textarea element. Here’s the javascript function:

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;
  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
  document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

And here’s how it can be used:

<p><button class="js-copy-bob-btn">Set clipboard to BOB</button>
  <button class="js-copy-jane-btn">Set clipboard to JANE</button></p>
<p><textarea class="js-test-textarea" cols="50" rows="10">Try pasting into here to see what you have on your clipboard:</textarea>
</p>

This post uses the stackoverflow question as a reference.

This content has been helpful to you?

Thanks for contributing!

Yes No