JavaScript Clipboard API with fallback

Learn how to use the JavaScript Clipboard API with fallback solutions for older browsers and unsupported environments.

The Clipboard API in JavaScript provides a modern way to interact with the system clipboard, allowing reading from and writing to it programmatically. However, not all browsers support this API, or the API may not be available, so it’s important to implement a fallback solution for better compatibility. Let’s explore how to use the Clipboard API with a fallback mechanism.

Using the Clipboard API

Here’s an example of how you can use the Clipboard API with a fallback:

async function copyToClipboard(text) {
  if (typeof navigator.clipboard === 'object') {
    try {
      await navigator.clipboard.writeText(text);

      return;
    } catch (err) {
      console.error('[copyToClipboard] Failed', err);
    }
  }

  if (document.queryCommandSupported('copy') === false) {
    console.warn('[copyToClipboard] queryCommand copy not available');

    return;
  }

  const textArea = document.createElement('textarea');
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand('copy');
  textArea.remove();
}

In this example, the copyToClipboard function checks if the navigator.clipboard object is available. If it is, the function uses the writeText method to copy the text to the clipboard. If the navigator.clipboard object is not available, the function creates a temporary textarea element, sets its value to the text to be copied, selects the text, and uses the execCommand method to copy the text to the clipboard. Note that the document.queryCommandSupported('copy') is a method that checks whether the copy command is supported by the browser.

Limitations

The navigator.clipboard may not be available for the following reasons:

1. Older browser: the older browsers might not support the Clipboard API. You can check the browser compatibility on the MDN Web Docs website.
2. Node.js environment: the Clipboard API is not available in Node.js environments, as it’s a browser-specific feature.
3. Web Worker: in some cases, the Clipboard API might not be available in Web Workers. This typically means that the worker must be running in a context that has a visible window or a frame, and that the worker has been granted permission to access the clipboard.
4. Security restrictions: some browsers or environments might restrict access to the Clipboard API due to security concerns. If your website is not using SSL, you will not be able to use the Clipboard API.
5. Permissions: the Clipboard API requires permission to access the clipboard. If the permission is not granted, the API will not be available.

JavaScript Clipboard API example

Here’s an example of how to use the JavaScript Clipboard API to copy text to the clipboard: