Copiando com Javascript - Clipboard API

TL;DR

let textToCopy = "Eu quero copiar esse texto aqui"

function afterSuccess() {
    console.log('Copiado com sucesso!')
}

function afterFailure(error) {
    console.error('A Cópia falhou!', error)
}

window.navigator.clipboard
    .writeText(textToCopy)
    .then(afterSuccess, afterFailure)

Numa era pré ClipboardAPI, a solução para copiar e colar algum texto que eu mais vi envolvia adicionar à página um input com o texto que você quer copiar, colocar o foco naquele input, selecionar o texto e enviar o comando document.execCommand("copy"). E em muitos casos essa ainda é a melhor solução dependendo de quais browsers a sua aplicação deve-se manter compatível. Você pode comparar o suporte dessa feature utilizando o caniuse.com. Suporte a document.execCommand x Suporte a Clipboard API write text. Em caso de IE, não tem jeito, vai ter que usar document.execCommand.

Para o uso do Clipboard API, além de conhecer a API em si, temos que respeitar algumas regras por questão de segurança. Uma delas, por exemplo, é que o clipboard.writeText vai falhar caso o usuário não esteja com foco na aba. Você pode ver esse erro acontecendo, testando o código no console do seu browser (isso no Chrome). Em alguns outros browsers, esse código só funciona caso esteja num código sendo executado em resposta a uma ação do usuário, como um click por exemplo. Então, tenha isso em mente ao utilizar essa API.

O código é simples, a função window.navigator.clipboard.writeText retorna uma Promise, ou seja, ele é assíncrono, logo após a sua execução pode ser que ele ainda não tenha terminado de copiar. Por isso, nós utilizamos o .then, para que quando essa Promise seja resolvida, ou seja, o comando tenha de fator terminado de copiar ou dado erro, no caso de sucesso execute a nossa função afterSuccess e em caso de erro execute nossa outra função, afterFailure. E é isso, assim que aparecer a mensagem de sucesso, já estamos livres pra sair colando nossa mensagem.

Esse text foi originalmente postado em https://giovanisleite.dev/copiando-com-javascript