On Firefox, HTTPS is required

ou can write an all-in-one wrapper function.

​

if in secure context (https) : use navigator clipboard api

if not : use the 'out of viewport hidden text area' trick

// return a promise

function copyToClipboard(textToCopy) {

    // navigator clipboard api needs a secure context (https)

    if (navigator.clipboard && window.isSecureContext) {

        // navigator clipboard api method'

        return navigator.clipboard.writeText(textToCopy);

    } else {

        // text area method

        let textArea = document.createElement("textarea");

        textArea.value = textToCopy;

        // make the textarea out of viewport

        textArea.style.position = "fixed";

        textArea.style.left = "-999999px";

        textArea.style.top = "-999999px";

        document.body.appendChild(textArea);

        textArea.focus();

        textArea.select();

        return new Promise((res, rej) => {

            // here the magic happens

            document.execCommand('copy') ? res() : rej();

            textArea.remove();

        });

    }

}

use :

​

copyToClipboard("I'm going to the clipboard !")

    .then(() => console.log('text copied !'))

    .catch(() => console.log('error'));