November 24, 2023 | Read Online

How to Copy Text to Your Clipboard with JavaScript

Happy Friday! This is 7.dev with another newsletter all about coding and AI in your inbox.

In this issue, I’ll show you how to copy text to clipboard with Javascript.

Before I get into it: If you also like podcasts, check out the 7.dev Podcast (My favorite). I’ll cover hacks, tips, and tricks every Wednesday in the full-stack development world. You can also search “7.dev podcast” on anywhere you find your podcasts!

Copy Text to Clipboard With JavaScript

As a web developer, you may have come across the need to copy text to the clipboard in your JavaScript projects. Whether it is for a copy button on a web page or for programmatically copying text, JavaScript provides various techniques for you to achieve this functionality. In this section, I’ll show you how to copy text to the clipboard using JavaScript and discuss the different methods available.

Key Takeaways

There are two primary ways to copy text to the clipboard in JavaScript: the Asynchronous Clipboard API and the deprecated Document.execCommand(‘copy’) method.
The Asynchronous Clipboard API is recommended for modern browsers and provides a more secure and reliable way to handle clipboard operations.
The Document.execCommand(‘copy’) method can be used as a fallback for older browsers but you should avoid it in favor of the Clipboard API whenever possible.
Considerations such as browser compatibility and user permissions should be taken into account when implementing clipboard functionality in your web applications.

To copy text to the clipboard with JavaScript, you have two main options. Firstly, you can use the Asynchronous Clipboard API, which is recommended for modern browsers. This method allows you to update the clipboard’s contents asynchronously using the Navigator.clipboard.writeText() function. Alternatively, you can use the deprecated Document.execCommand(‘copy’) method as a fallback for older browsers. By invoking Document.execCommand(‘copy’) within a user action event listener, you can copy the desired text to the clipboard.

A Step-by-Step Guide to Copying Text to the Clipboard with JavaScript

Option 1: Asynchronous Clipboard API

The Asynchronous Clipboard API provides a more modern and secure way to interact with the clipboard in JavaScript. Follow these steps to copy text to the clipboard using the Asynchronous Clipboard API:

Step 1: Check browser compatibility
First, you need to check if the browser supports the Asynchronous Clipboard API. This can be done using the navigator.clipboard property. If navigator.clipboard is defined, it means the API is available for use.

Step 2: Request necessary permissions
To write text to the clipboard, you need to request the “clipboard-write” permission. In a secure context (HTTPS), you can use the navigator.permissions API to request the permission. If the permission is granted, you can proceed with copying the text.

Step 3: Use the writeText() method
Once the permission is granted, you can use the navigator.clipboard.writeText() method to write text to the clipboard. Pass the desired text string as an argument to the method. This method returns a promise that resolves when the text is successfully copied or rejects if there is an error.

Example:

navigator.clipboard.writeText('Hello, World!')
  .then(() => {
    console.log('Text copied to clipboard!');
  })
  .catch((error) => {
    console.error('Failed to copy text to clipboard:', error);
  });

Option 2: Document.execCommand(‘copy’) (Deprecated)

The Document.execCommand(‘copy’) method is an older approach to copying text to the clipboard in JavaScript. It should only be used as a fallback for older browsers that do not support the Asynchronous Clipboard API. Follow these steps to use the Document.execCommand(‘copy’) method:

Step 1: Create a copy button or trigger
To initiate the copy action, you need to create a button or any other element that triggers the copy operation. Add an event listener to the element to handle the copy action.

Step 2: Implement the copy functionality
Within the event listener, use the Document.execCommand(‘copy’) method to copy the desired text to the clipboard. This method should be called within a user-generated event handler, such as a click event, to comply with browser security restrictions.

Example:

<button id="copyButton">Copy Text</button>
<textarea id="textToCopy">Text to be copied</textarea>

<script>
  const copyButton = document.getElementById('copyButton');
  const textToCopy = document.getElementById('textToCopy');

  copyButton.addEventListener('click', () => {
    textToCopy.select();
    document.execCommand('copy');
    alert('Text copied to clipboard!');
  });
</script>