Copiar texto para a área de transferência em JavaScript
-
Copiar texto para a área de transferência usando o método
Document.execCommand()em JavaScript -
Copiar texto para a área de transferência usando
Clipboard APIem JavaScript
Hoje em dia, muitos desenvolvedores da web desejam implementar uma funcionalidade em seus sites que permitirá aos usuários copiar diretamente um monte de texto de seus sites com apenas um clique. Alguns dos exemplos mais comumente usados disso seriam copiar um comando de terminal ou fragmentos de código inteiros de qualquer site técnico.
Vamos ver o que queremos dizer com área de transferência e como todo esse processo funciona. Depois disso, implementaremos essa funcionalidade de cópia para a área de transferência em JavaScript.
Tudo o que está presente em nossos computadores, como aplicativos, imagens, textos, arquivos, etc., é chamado de dados. Portanto, sempre que tentarmos copiar qualquer coisa presente dentro de nosso computador, nosso computador alocará uma pequena parte da memória para nossos dados que copiamos para armazenar esses dados dentro desse espaço de memória. Isso é chamado de [área de transferência]), e é assim que o computador se lembra das informações que você copiou. Agora que temos os dados armazenados na memória, podemos pegar esses dados e depois colá-los ou usá-los quantas vezes quisermos.
Teoricamente, parece simples, mas na prática é difícil de implementar porque há muitas complexidades envolvidas. Mas não se preocupe, usando JavaScript, podemos fazer isso de uma maneira muito mais simples com a ajuda do método Document.execCommand() e da API Clipboard.
Copiar texto para a área de transferência usando o método Document.execCommand() em JavaScript
Este é o método mais usado para interagir com a área de transferência. Usando este método, você pode realizar as 3 operações a seguir.
- Copie o texto para a área de transferência usando
Document.execCommand('copy') - Corte o texto e adicione-o à área de transferência usando
Document.execCommand('cut') - Cole o conteúdo que já está presente na área de transferência usando
Document.execCommand('paste')
Observe que temos que passar o parâmetro de qual operação queremos realizar. Neste artigo, iremos nos concentrar apenas na operação de cópia e não nas outras. Vamos dar um exemplo e entender essa operação de cópia.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert('Copied!');
}
Primeiro, temos o arquivo HTML com uma textarea contendo uma string e um botão. Nosso objetivo aqui é copiar o texto presente dentro da textarea ao clicar no botão Copy. Em segundo lugar, temos um arquivo JS dentro do qual temos uma função chamada copyToClipBoard(). Esta função será responsável por copiar o texto para a área de transferência.
Inicialmente, temos que obter a textarea presente dentro de nosso DOM usando document.getElementById, e vamos armazenar esse elemento dentro da variável content. Agora temos o conteúdo da textarea dentro da nossa variável content. Para copiar o texto, primeiro temos que selecionar o texto inteiro usando o método select(). Isso é semelhante a como selecionar texto usando o mouse.
Usando o método document.execCommand('copy'), copiaremos o texto selecionado e mostraremos um alerta ao usuário para que ele saiba que o texto foi copiado para a área de transferência.
Por fim, temos que chamar a função copyToClipBoard() em nosso botão Copy como um evento onClick. Agora, se você abrir esta página HTML em seu navegador, verá os resultados finais.
Copiar texto para a área de transferência usando Clipboard API em JavaScript
A Clipboard API fornece operações assíncronas de leitura e gravação, usando as quais você pode copiar e colar conteúdo de e para a área de transferência. A API Clipboard está disponível dentro do objeto navigator.clipboard.
Esta API é uma nova adição à linguagem JavaScript e nem todos os navegadores serão capazes de suportá-la, especialmente os antigos. Se você deseja verificar se o seu navegador suporta esta API ou não, você pode usar o código abaixo.
if (!navigator.clipboard) {
// Clipboard API not available
return
}
Vamos ver como usar a API Clipboard para copiar texto para a área de transferência.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClickBoard() {
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {console.log('Text copied to clipboard...')})
.catch(err => {
console.log('Something went wrong', err);
})
}
O código acima é quase semelhante ao código que vimos antes. A única diferença aqui é que modificamos a função copyToClickBoard(). Este método será chamado quando pressionarmos o botão Copy. Dentro desta função, primeiro obtemos o texto presente dentro da textarea usando a propriedade innerHTML e armazenando esse texto dentro da variável content.
O objeto navigator.clipboard possui dois métodos. Um é o método writeText() usado para copiar o texto para a área de transferência, e outro é o método readText() que será usado para ler o texto presente dentro da área de transferência e colá-lo. Aqui, estamos apenas preocupados com o método writeText().
Dentro deste método, temos que passar a variável content, que atualmente contém todo o texto em formato de string. Depois disso, este método pegará o texto e o copiará para a área de transferência. Se for bem-sucedido, mostraremos a mensagem Text copied to clipboard... do contrário, exibiremos uma mensagem de erro dependendo do tipo de erro ocorrido.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn