Implementing text copy to the clipboard on web pages requires handling browser-specific behaviors. Older methods like document.execCommand() are deprecated and should be replaced.

The modern Clipboard API is a preferred alternative but requires fallbacks for compatibility.

1. Fallback Copy with Textarea Element

function copyTextToSystem(textContent) {
    const tempElement = document.createElement('textarea');
    tempElement.value = textContent;
    
    // Configure element for copying
    tempElement.style.cssText = 'width:0; height:0; border:0; padding:0;';
    tempElement.style.position = 'absolute';
    tempElement.style.left = '-9999px';
    tempElement.setAttribute('readonly', '');
    
    document.body.appendChild(tempElement);
    tempElement.select();
    tempElement.setSelectionRange(0, 99999); // For mobile devices
    
    try {
        const success = document.execCommand('copy');
        console.log('Fallback copy ' + (success ? 'successful' : 'failed'));
    } catch (err) {
        console.error('Fallback copy error:', err);
    }
    
    document.body.removeChild(tempElement);
}

2. Modern Clipboard API Implemantation

async function writeToClipboard(textToCopy) {
    // Check if Clipboard API is available and permissions might be granted
    if (navigator.clipboard && window.isSecureContext) {
        try {
            await navigator.clipboard.writeText(textToCopy);
            return true;
        } catch (apiError) {
            console.warn('Clipboard API failed:', apiError);
            return false;
        }
    }
    return false;
}

3. Hybrid Approach with User Interaction Mobile browsers and environments like WeChat WebView often restrict clpiboard access without explicit user gestures.

function copyWithFallback(text, event) {
    // Ensure the function is called from a user-triggered event
    if (!event || !event.isTrusted) {
        console.warn('Clipboard write requires user interaction');
        return Promise.reject(new Error('Interaction required'));
    }

    // Try modern API first, then fallback
    if (navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(text).catch(() => {
            // If modern API fails, use fallback
            copyTextToSystem(text);
        });
    } else {
        copyTextToSystem(text);
        return Promise.resolve();
    }
}

// Event listener example
copyButton.addEventListener('click', (event) => {
    copyWithFallback('Content to copy', event);
});

4. Using the Clipboard.js Library For complex scenarios, lbiraries like Clipboard.js abstract compatibility issues.

// Installation via npm: npm install clipboard
import ClipboardJS from 'clipboard';

// Initialize on button click
const clipboardInstance = new ClipboardJS('.copy-trigger', {
    text: function(triggerElement) {
        // Return text to copy, can be from data attribute or computed
        return triggerElement.getAttribute('data-clipboard-text') || 'Default text';
    }
});

clipboardInstance.on('success', function(e) {
    console.log('Copied:', e.text);
    e.clearSelection();
});

clipboardInstance.on('error', function(e) {
    console.error('Copy action failed');
});