How to use the Clipboard API in JS

1. Document.execCommand() method

Document.execCommand() is the traditional method for operating the clipboard and is supported by various browsers.

It supports three operations: copy, cut and paste.

• document.execCommand('copy')
• document.execCommand('cut')
• document.execCommand('paste')

(1) Copy operation

When copying, first select the text, then call document.execCommand('copy'), and the selected text will be added to the clipboard.

const inputElement = document.querySelector('#input');
inputElement.select();
document.execCommand('copy');

In the example above, the script first selects the text in the inputElement inputElement (inputElement.select()), and then uses document.execCommand('copy') to copy it to the clipboard.

Note that the copy operation is best placed in an event listening function, triggered by the user (for example, the user clicks a button). Some browsers may report an error if the script is executed autonomously.

(2) Paste operation

When pasting, calling document.execCommand('paste') will output the contents of the clipboard to the current focused element.

const pasteText = document.querySelector('#output');
pasteText.focus();
document.execCommand('paste');

(3) Disadvantages

Although the Document.execCommand() method is convenient, it has some disadvantages.

First, it can only copy the selected content to the clipboard, and cannot write arbitrary content to the clipboard.

Secondly, it is a synchronous operation, and if you copy/paste a large amount of data, the page will lag. Some browsers will also pop up a prompt box asking for user permission, and the page will become unresponsive before the user makes a choice.

To solve these problems, browser manufacturers proposed the asynchronous Clipboard API.

2. Asynchronous Clipboard API

Clipboard API is the next generation of clipboard operation method, which is more powerful and reasonable than the traditional document.execCommand() method.

All its operations are asynchronous and return Promise objects, which will not cause page lag. Moreover, it can put arbitrary content (such as pictures) into the clipboard.

The navigator.clipboard property returns the Clipboard object, and all operations are performed through this object.

const clipboardObj = navigator.clipboard;

If the navigator.clipboard property returns undefined, it means that the current browser does not support this API.

Since users may place sensitive data (such as passwords) on the clipboard, allowing scripts to read it arbitrarily will create security risks, so this API has many security restrictions.

First of all, the Chrome browser stipulates that only pages using the HTTPS protocol can use this API. However, the development environment (localhost) allows the use of unencrypted protocols.

Secondly, the user's permission must be obtained explicitly when calling. The specific implementation of permissions uses the Permissions API. There are two permissions related to the clipboard: clipboard-write (write permission) and clipboard-read (read permission). "Write permissions" are automatically granted to the script, while "read permissions" must be given explicitly by the user. That is to say, writing to the clipboard can be done automatically by the script, but when reading the clipboard, the browser will pop up a dialog box asking the user whether to agree to read.

In addition, it should be noted that the script always reads the clipboard of the current page. One problem this brings is that if you paste the relevant code into the developer tool and run it directly, you may get an error because the current page at this time is the developer tool window, not the web page.

(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
})();

If you paste the above code into the developer tool and run it, you will get an error. Because when the code is running, the developer tools window is the current page, and this page does not have the DOM interface that the Clipboard API depends on. One solution is to put the relevant code in setTimeout() to delay execution, and quickly click the browser page window before calling the function to make it the current page.

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

After pasting the above code into the developer tool and running it, quickly click on the page window of the web page to make it the current page, so that no error will be reported.

3. Clipboard Object

The Clipboard object provides four methods for reading and writing the clipboard. They are all asynchronous methods that return Promise objects.

3.1 Clipboard.readText()

The Clipboard.readText() method is used to copy the text data in the clipboard.

document.body.addEventListener(
  'click',
  async (e) => {
    const text = await navigator.clipboard.readText();
    console.log(text);
  }
)

In the above example, when the user clicks on the page, the text in the clipboard will be output. Note that the browser will pop up a dialog box at this time, asking the user whether to agree to allow the script to read the clipboard.

If the user disagrees, the script will report an error. At this time, you can use the try...catch structure to handle errors.

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
}

3.2 Clipboard.read()

The Clipboard.read() method is used to copy the data in the clipboard, which can be text data or binary data (such as pictures). This method requires explicit permission from the user.

This method returns a Promise object. Once the state of the object becomes resolved, you can get an array, each array member is an instance of the ClipboardItem object.

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        console.log(URL.createObjectURL(blob));
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

The ClipboardItem object represents a single clipping item. Each clipping item has a ClipboardItem.types property and a ClipboardItem.getType() method.

The ClipboardItem.types property returns an array whose members are the available MIME types for the clipboard item. For example, if a clipboard item can be pasted in HTML format or in plain text format, it will have two MIME types (text/html and text/plain).

The ClipboardItem.getType(type) method is used to read the data of the clipboard item and returns a Promise object. This method accepts the MIME type of the clip item as a parameter and returns data of that type. This parameter is required, otherwise an error will be reported.

3.3 Clipboard.writeText()

The Clipboard.writeText() method is used to write text content to the clipboard.

document.body.addEventListener(
  'click',
  async (e) => {
    await navigator.clipboard.writeText('Yo')
  }
)

The above example shows that after the user clicks on a web page, the script writes text data to the clipboard.

This method does not require user permission, but it is best to put it in a try...catch to prevent errors.

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

3.4 Clipboard.write()

The Clipboard.write() method is used to write arbitrary data to the clipboard, which can be text data or binary data.

This method accepts a ClipboardItem instance as a parameter, which represents the data to be written to the clipboard.

try {
  const imgURL = 'https://dummyimage.com/300.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem({
      [blob.type]: blob
    })
  ]);
  console.log('Image copied.');
} catch (err) {
  console.error(err.name, err.message);
}

In the example above, the script writes an image to the clipboard. Note that Chrome currently only supports writing PNG format images.

ClipboardItem() is a constructor provided by the browser natively, which is used to generate a ClipboardItem instance. It accepts an object as a parameter. The key name of the object is the MIME type of the data, and the key value is the data itself.

The following example writes multiple formats of values ​​of the same clip item to the clipboard, one is text data and the other is binary data, for pasting in different occasions.

function copy() {
  const image = await fetch('kitten.png');
  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
  const item = new ClipboardItem({
    'text/plain': text,
    'image/png': image
  });
  await navigator.clipboard.write([item]);
}

4. copy event, cut event

When the user puts data into the clipboard, the copy event is triggered.

The following example converts the text that the user puts into the clipboard to uppercase.

const source = document.querySelector('.source');

source.addEventListener('copy', (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
  event.preventDefault();
});

In the above example, the clipboardData property of the event object contains the clipboard data. It is an object with the following properties and methods.

• Event.clipboardData.setData(type, data): Modify the clipboard data. You need to specify the data type.
• Event.clipboardData.getData(type): Get clipboard data. You need to specify the data type.
• Event.clipboardData.clearData([type]): Clears the clipboard data. You can specify the data type. If you do not specify a type, data of all types will be cleared.
• Event.clipboardData.items: An array-like object containing all clipboard items, but usually only one clipboard item.

The following example intercepts the user's copy operation and puts the specified content into the clipboard.

const clipboardItems = [];

document.addEventListener('copy', async (e) => {
  e.preventDefault();
  try {
    let clipboardItems = [];
    for (const item of e.clipboardData.items) {
      if (!item.type.startsWith('image/')) {
        continue;
      }
      clipboardItems.push(
        new ClipboardItem({
          [item.type]: item,
        })
      );
      await navigator.clipboard.write(clipboardItems);
      console.log('Image copied.');
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

In the above example, e.preventDefault() is used to cancel the default operation of the clipboard, and then the script takes over the copy operation.

The cut event is triggered when the user performs a cut operation. Its processing is exactly the same as the copy event, and the cut data is obtained from the Event.clipboardData property.

5. Paste Event

When the user uses the clipboard data to paste, the paste event is triggered.

The following example intercepts the paste operation and uses the script to retrieve the data from the clipboard.

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const text = await navigator.clipboard.readText();
  console.log('Pasted text: ', text);
});

The above is the details of how JS uses the Clipboard API to operate the Clipboard. For more information about how JS uses the Clipboard, please pay attention to other related articles on 123WORDPRESS.COM!