Record 📝 points every day there will always be harvest ~

Document. ExecCommand execCommand execCommand execCommand execCommand execCommand execCommand

  • Document. execCommand is not compatible with some browser environments, so you have to make your own.
  • Document. execCommand has been deprecated on MDN and is now navigator.clipboard.

Based on the first point above, 👆 intends to use others to encapsulate 📦’s good libraries, looking for a circle such as clipboard, copy-to-clipboard, react-copy-to-clipboard are based on document. ExecCommand implementation, then give up.

So, I started to use navigator. Clipboard, but! Asynchronous clipboard read-write methods can only be used if the user has previously granted the site or application permission to access the clipboard. Otherwise, an error is reported:

Uncaught (in promise) TypeError: Cannot read property 'writeText' of undefined at HTMLInputElement.<anonymous>
Copy the code

This is because the browser disables the navigator.clipboard object for non-secure domains, and only the following addresses are secure.

Security domains include addresses for local access and TLS security authentication, such as HTTPS addresses, 127.0.0.1, and localhost.

The first thought was to use:

Use navigator.clipboard for secure domains to improve efficiency, and fall back to Document. execCommand(‘copy’) for non-secure domains. Library to ensure functional availability.

function copyToClipboard(textToCopy) { 
    // Navigator Clipboard requires a security context such as HTTPS
    if (navigator.clipboard && window.isSecureContext) { 
        // Navigator clipBoard writes text to the clipboard
        return navigator.clipboard.writeText(textToCopy); 
    } else { // Create text area
        let textArea = document.createElement("textarea"); 
        textArea.value = textToCopy; 
        // Make the text area not visible in the viewport
        textArea.style.position = "absolute"; 
        textArea.style.opacity = 0; 
        textArea.style.left = "-999999px"; 
        textArea.style.top = "-999999px"; document.body.appendChild(textArea); 
        textArea.focus(); 
        textArea.select(); 
        return new Promise((res, rej) = > { 
        // Execute the copy command and remove the text box
            document.execCommand('copy')? res() : rej(); textArea.remove(); }); }}Copy the code

I was thinking about compatibility with Document. execCommand, so I introduced the copy-to-clipboard library

 if (navigator && navigator.clipboard && window.isSecureContext) {
    navigator.clipboard
        .writeText(url)
        .then(() = > {
            alert('Copy successful');
        })
        .catch(() = > {
            alert('Replication failed');
        });
} else {
    if (copy(url)) {
        alert('Copy successful');
    } else {
        alert('Replication failed'); }}Copy the code

Later, you can check out the Clipboard library when you are free, and flag comes again at 🐒

Related links 🔗 : Ruan Yifeng – Clipboard