The Navigator Clipboard API in JavaScript

The navigator.clipboard API is a new API in modern browsers that provides an easy way to interact with the clipboard, allowing users to copy and paste formatted or plain text content. In this article, we'll explain how you can use the navigator.clipboard API in JavaScript to interact with the clipboard.

First, let's understand what the navigator.clipboard API offers. The API provides two methods: readText() and writeText().
The readText() method allows you to read the content of the clipboard as text, while the writeText() method allows you to write text to the clipboard.

Both methods return a Promise that resolves when the operation is completed.

Here's an example that shows how to read the content of the clipboard:

const readTextFromClipboard = () => {
  navigator.clipboard.readText()
    .then(text => {
      console.log('Clipboard content: ', text);
    })
    .catch(err => {
      console.error('Failed to read clipboard contents: ', err);
    });
};

As you can see, we call the navigator.clipboard.readText() method and then wait for the Promise to resolve. Then, we log the content of the clipboard to the console.
Now let's look at how to write text to the clipboard:

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

This code calls the navigator.clipboard.writeText() method and passes it the text we want to copy to the clipboard.
Just like with the readText() method, we wait for the Promise to resolve and then log a confirmation message to the console.

As they both return a Promise, it means that you can also use async/await with it, so you can rewrite the above function like this:

const writeTextInClipboardAsync = async () => {
  try {
    await navigator.clipboard.writeText('Hello, world!');
    console.log('Text copied to clipboard');    
  } catch (error) {
    console.error('Failed to copy text: ', error);
  }
};

It's important to note that the navigator.clipboard API is relatively new, and legacy browsers like IE don't support this API, but if you don't need to support those browser, then you are ready to go and use it.
You can check the support table on Can I Use.

You can use the following code to check if the clipboard API is supported:

if ('clipboard' in navigator) { 
  console.log('Clipboard API is supported!'); 
} else {
  console.log('Clipboard API is not supported!');
}

In conclusion, the navigator.clipboard API is a useful addition to modern web browsers, providing an easy way to copy and paste content. By using the readText() and writeText() methods, you can interact with the clipboard and enhance the functionality of your web applications.

Comments

[Malin Mabika]

Super helpful thanks! Much more clear than the MDN docs imo