Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela.
É muito importante saber como usar JavaScript para copiar ao clicar em certo elemento ou tag do site pois isso oferece aos usuários uma forma conveniente e mais rápida para colar o item, sem a necessidade de selecionar e copiar manualmente.
Nesse exemplo iremos copiar o conteúdo de um campo de tabela. Mais precisamente, o texto dentro de um <td></td>. Quando clicar em um nome de fruta ele será copiado.
Veja a tabela que usaremos como exemplo:
<table border="1">
<thead>
<tr>
<th>Fruta</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" onclick="copiarItem(1)">Manga</a></td>
<td>R$ 8,00</td>
</tr>
<tr>
<td><a href="#" onclick="copiarItem(2)">Goiaba</a></td>
<td>R$ 5,00</td>
</tr>
</tbody>
</table>
Vaja acima o evento onclick que está dentro de um link: href=”#” onclick=”copiarItem()”
Ao clicar nesse link será chamada uma função chamada copiarItem, passando um valor, em nosso caso, passa 1 ou 2.
A seguir, posto o conteúdo completa da função.
<script>
function copiarItem(rowIndex) {
// Obter a referência da célula que você deseja copiar
var tabela = document.querySelector('table');
var linha = tabela.rows[rowIndex];
var celula = linha.cells[0]; // Neste exemplo, estamos copiando a primeira célula da linha
// Criar um elemento de área de transferência temporária
var tempInput = document.createElement('input');
tempInput.value = celula.textContent;
// Adicionar o elemento de área de transferência à página
document.body.appendChild(tempInput);
// Selecionar e copiar o conteúdo da área de transferência
tempInput.select();
document.execCommand('copy');
// Remover o elemento de área de transferência temporária
document.body.removeChild(tempInput);
alert('Item copiado: ' + celula.textContent);
}
</script>
É bom entendermos o que faz a linha var celula = linha.cells[0]; acima. Ela faz com que o conteúdo da primeira linha seja copiado. Ou seja, se alterarmos de 0 para 1 então ao clicarmos em Manga será copiado R$ 8,00 e se clicarmos em Goiaba será copiado R$ 5,00.
O restante da tabela está bem explicado nos comentários.
Inserir uma alert() apanas para não termos que mostrar colando o conteúdo nesse exemplo.