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
Top comments (0)