How to Copy the Text to the Clipboard with JavaScript

As a web developer, you may have come across a situation where you need to allow the users to copy a certain piece of text on your website.

It could be a coupon code, a referral link, or a snippet of code.

Whatever the reason, copying text to the clipboard has become a basic requirement of most websites.

In this Javascript tutorial, we will show you how to copy text to the clipboard using JavaScript.

Copying text to the clipboard has been a challenge in the past, but with the advent of modern web technologies, it has become much easier.

In the past, developers had to use Flash or Java applets to achieve this, but now, it can be done with JavaScript only.

The Clipboard API

The Clipboard API is a modern way of copying text to the clipboard.

It was introduced in HTML5 and is now widely supported by modern browsers.

The Clipboard API provides two methods to copy text to the clipboard: writeText() and write().

In this tutorial, we will be using the writeText() method as it is the simplest and most widely supported method.

The Code

Here is the code to copy text to the clipboard using the Clipboard API:

navigator.clipboard.writeText(text).then(function() {
  console.log('Text copied to clipboard');
}, function(err) {
  console.error('Could not copy text: ', err);
});

In the code above, we first check if the clipboard property is available in the navigator object.

If it is, we use the writeText() method to copy the text to the clipboard.

If the text is successfully copied, we log a message to the console. If there is an error, we log an error message to the console.

Fallback for Older Browsers

If you need to support older browsers that do not support the Clipboard API, you can use the following fallback code:

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  textArea.style.position="fixed";  //avoid scrolling to bottom
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

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

  document.body.removeChild(textArea);
}

if (!navigator.clipboard) {
  fallbackCopyTextToClipboard(text);
} else {
  navigator.clipboard.writeText(text).then(function() {
    console.log('Text copied to clipboard');
  }, function(err) {
    console.error('Could not copy text: ', err);
  });
}

In the code above, we first check if the clipboard property is available in the navigator object.

If it is not, we use the fallbackCopyTextToClipboard() function to copy the text to the clipboard.

If the text is successfully copied, we log a message

to the console. If there is an error, we log an error message to the console.

The fallbackCopyTextToClipboard() function works by creating a textarea element, setting its value to the text that needs to be copied, appending it to the body of the document, focusing on it, and selecting it.

Then, we use the document.execCommand('copy') method to copy the text to the clipboard.

If the text is successfully copied, we log a message to the console. If there is an error, we log an error message to the console.

Conclusion

Copying text to the clipboard with JavaScript has become much easier with the introduction of the Clipboard API.

In this tutorial, we showed you how to use the Clipboard API to copy text to the clipboard and provided a fallback solution for older browsers that do not support the Clipboard API.

With these techniques, you can easily add a copy to clipboard feature to your website.