How to copy the text to clipboard in JavaScript

You may want to include the copy feature while creating complex web pages and applications. Instead of selecting the text and pressing a few keys on the keyboard to copy it, your users may now copy text by clicking a button or icon.

When someone has to copy an activation code, recovery key, a snippet of code, etc., this capability is typically employed. To let the user know that the text has been copied to their clipboard, you may also include features like an alert or text on the screen (which could be a modal).

In the past, the document.execCommand() command would have been used to accomplish this, but it has since been deprecated. The Clipboard API is now available, allowing you to asynchronously read from and write to the system clipboard as well as respond to clipboard activities (cut, copy, and paste). JavaScript's Clipboard API can be used to copy text to the clipboard. You can read from and write to the clipboard by using the Clipboard API, which offers a means to communicate with the clipboard.

You will discover how to use the Clipboard API to write (copy) text and images to the clipboard in this tutorial.

How to Examine the Permissions of the Browser

It is crucial to be aware that only pages delivered over HTTPS are compatible with the Clipboard API. Before attempting to write to the clipboard, you should check your browser's permissions to make sure you have write access. The navigator will help you with this .permissions phrasing.

Here's how you can copy text to the clipboard using the Clipboard API:

Create a button or any element that will trigger the copy action.

For example:

Add an event listener to the button that will trigger the copy action. Inside the event listener, you will need to call the writeText method of the Clipboard API to write the text to the clipboard.

For example:

In the above example, we first select the button using document.querySelector, and then add an event listener to it using addEventListener. Inside the event listener, we call the writeText method of the Clipboard API, passing the text we want to copy as an argument. The writeText method returns a promise, so we use .then to handle the success case and .catch to handle any errors.

Make sure to request the "clipboard-write" permission in your website. Without this permission, the navigator.clipboard.writeText will fail. Add the following line of code to your HTML file in the head section:

That's it! When the user clicks the button, the text will be copied to the clipboard. Note that this method works on most modern browsers, but some older browsers may not support it. In that case, you may need to use a fallback method, such as using a hidden input field to store the text and then selecting it with document.execCommand('copy').

Example: In this case, the aforementioned strategy will be used.

Output

Here, click the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.