Copy To Clipboard Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

28

Share

Copy to Clipboard with JavaScript

Copying text to the clipboard is a common functionality used in web applications. JavaScript offers a simple and effective way to achieve this.

Using navigator.clipboard.writeText()

The most modern and recommended method is using the navigator.clipboard.writeText() API. This API is supported in most modern browsers.

Code Example:

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Text copied to clipboard: ', text);
      // You can add a notification or any other feedback here
    })
    .catch(err => {
      console.error('Failed to copy: ', err);
    });
}

// Example usage:
const textToCopy = 'This is the text to copy';
copyToClipboard(textToCopy);

Explanation:

• The copyToClipboard() function takes the text to be copied as an argument.
• It uses navigator.clipboard.writeText() to write the text to the clipboard.
• The function uses a Promise to handle the asynchronous operation.
• If the copying is successful, a success message is logged to the console.
• If an error occurs, an error message is logged to the console.

Using the execCommand() Method (Legacy Method)

The execCommand() method is a legacy method that can be used for clipboard operations. However, it's less reliable and may not work in all browsers.

Code Example:

function copyToClipboard(text) {
  const tempInput = document.createElement('textarea');
  tempInput.value = text;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand('copy');
  document.body.removeChild(tempInput);
}

// Example usage:
const textToCopy = 'This is the text to copy';
copyToClipboard(textToCopy);

Explanation:

• The function creates a temporary textarea element.
• It sets the textarea's value to the text to be copied.
• It appends the textarea to the document body.
• It selects the textarea content.
• It executes the copy command using document.execCommand('copy').
• It removes the textarea from the document body.

Handling Browser Compatibility

The navigator.clipboard.writeText() method is the preferred method for copying text to the clipboard. However, it's important to consider browser compatibility. If you need to support older browsers, you can use a fallback solution using the execCommand() method.

Code Example (with fallback):

function copyToClipboard(text) {
  if (navigator.clipboard) {
    // Use the modern API
    navigator.clipboard.writeText(text)
      .then(() => {
        console.log('Text copied to clipboard: ', text);
      })
      .catch(err => {
        console.error('Failed to copy: ', err);
      });
  } else {
    // Fallback to legacy method
    const tempInput = document.createElement('textarea');
    tempInput.value = text;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
  }
}

Conclusion

Copying text to the clipboard with JavaScript is a simple yet powerful feature. Using the modern navigator.clipboard.writeText() method ensures compatibility with most modern browsers. You can enhance your web applications by implementing this feature to improve user experience.