Working with the clipboard in JavaScript using the asynchronous Clipboard API

There is a new javascript API designed to organize asynchronous access to the clipboard using the specification , which is still at the development stage. So far in web development, the standard way to copy text to the clipboard is to use the document.execCommand method. The main disadvantage of this approach is that it is a synchronous blocking operation. The asynchronous API for working with the clipboard is based on promises ; one of its tasks is to eliminate this drawback. It is designed to give web developers an easier-to-use, uniform API for working with the clipboard. In addition, this API is designed with the ability to support multiple data types, not just text / plain.


It should be noted that now the new API is available only in Chrome 66+ and only supports copying and pasting plain text. In addition, it only works when the page is loaded over HTTPS or from localhost, and only when the page is open in the current active browser tab.

Write data to the clipboard

Writing data to the clipboard is a simple operation implemented by calling the writeText object's writeText method with passing it the corresponding text.

 navigator.clipboard.writeText('Hello Alligator!') .then(() => {   // ! }) .catch(err => {   console.log('Something went wrong', err); }); 

Reading data from the clipboard

In order to read data from the clipboard, use the readText method. In order to increase security, in addition to the page that reads data from the clipboard, should be open in the active tab of the browser, the user must grant it additional permission. The browser will automatically request this permission on the first call to readText .
')

 navigator.clipboard.readText() .then(text => {   // `text`  ,     }) .catch(err => {   // ,             console.log('Something went wrong', err); }); 

Practical example

Let us analyze a simple example of interaction with the clipboard from JavaScript. It will only work in supported browsers. If you want, you can customize it yourself by adding mechanisms that allow it to function in browsers that do not yet support the Clipboard API. You can see how it all works on the page of the original article, in the section Simple Demo.

Consider the HTML markup.

 <div> <input type="text" class="to-copy" placeholder="Type something..." aria-label="Type something"> <button class="write-btn">Copy to clipboard</button> </div> <div> <h3 class="clipboard-results"></h3> <button class="read-btn">Paste from clipboard</button> </div> 

And here is the JS code that is responsible for working with the clipboard.

 const readBtn = document.querySelector('.read-btn'); const writeBtn = document.querySelector('.write-btn'); const resultsEl = document.querySelector('.clipboard-results'); const inputEl = document.querySelector('.to-copy'); readBtn.addEventListener('click', () => { navigator.clipboard.readText()   .then(text => {     resultsEl.innerText = text;   })   .catch(err => {     console.log('Something went wrong', err);   }) }); writeBtn.addEventListener('click', () => { const inputValue = inputEl.value.trim(); if (inputValue) {   navigator.clipboard.writeText(inputValue)     .then(() => {       inputEl.value = '';       if (writeBtn.innerText !== 'Copied!') {         const originalText = writeBtn.innerText;         writeBtn.innerText = 'Copied!';         setTimeout(() => {           writeBtn.innerText = originalText;         }, 1500);       }     })     .catch(err => {       console.log('Something went wrong', err);     }) } }); 

As you can see, everything here is very simple. The only place that we had to work on was the code for working with the copy button, where we first check what we have to copy, and then briefly change the text of the button and clear the input field after successfully completing the copy operation.

Future Clipboard API

This API describes the more general write and read methods that allow you to work with data that is different from plain text, in particular, with images. For example, using the read method might look like this:

 navigator.clipboard.read().then(({ items }) => { items.forEach(item => {   console.log(item.type);   //  -    }); }); 

Please note that these methods are not yet supported by any of the existing browsers.

Check browser capabilities

Suppose you have created a web project, some of the functions of which rely on opportunities for working with the clipboard. Considering that the Clipboard API currently supports only one browser, in such a project, it would be useful to provide alternative ways to work with the clipboard. For example, a method based on execCommand . In order to understand whether the browser supports what we need, you can simply check for the presence of the clipboard object in the global navigator object:

 if (navigator.clipboard) { //  ,    . } else { //  .   execCommand     . } 

Results

We believe that a unified mechanism for working with the clipboard is a useful feature, the support of which will appear in all major browsers in the foreseeable future. If this topic is interesting to you - take a look at this material by Jason Miller.

Dear readers! What are the most promising options for using the Clipboard API?