How Can I Reliably Copy Text to the Clipboard in JavaScript Across Different Browsers?

Copying to the Clipboard in JavaScript: A Multi-Browser Approach

Copying text to the clipboard involves leveraging various browser APIs. This article focuses on the three primary methods:

1. Async Clipboard API: [navigator.clipboard.writeText]
Released in Chrome 66, the Async Clipboard API provides asynchronous access to the clipboard. It uses Promises, ensuring that user prompts do not interrupt the JavaScript execution. This method requires HTTPS and supports inactive tabs in Chrome 66.

2. document.execCommand('copy') (Deprecated)
Available in most browsers since 2015, this method is synchronous, blocking JavaScript execution. It copies text from the DOM and places it on the clipboard. Some browsers may display permission prompts during the process.

3. Overriding the Copy Event
This advanced technique allows you to modify what appears on the clipboard based on copy events. It is not covered here as it does not directly address copying to the clipboard.

General Development Notes

• Clipboard operations generally require the page to be active or need user interaction.
• As of February 2020, cross-origin IFRAMEs and IFRAME sandboxing may prevent the sample code from working in some browsers.

Async Fallback Approach

To ensure cross-browser compatibility, consider using an asynchronous approach that falls back to document.execCommand('copy') for older browsers:

The above is the detailed content of How Can I Reliably Copy Text to the Clipboard in JavaScript Across Different Browsers?. For more information, please follow other related articles on the PHP Chinese website!