Como Copiar e Colar Conteúdo da Área de Transferência com HTML e JavaScript

---

A área de transferência é uma ferramenta poderosa que pode ser usada para melhorar a experiência do usuário em aplicações web. Com ela, é possível implementar funcionalidades como copiar e colar conteúdo de forma interativa e prática. Neste post, vamos abordar como criar essas funcionalidades utilizando HTML e JavaScript.

1. Introdução

A capacidade de interagir com a área de transferência é uma funcionalidade cada vez mais requisitada em aplicações web. Seja para facilitar o preenchimento de formulários ou a transferência de informações, saber copiar e colar conteúdo automaticamente pode aumentar muito a eficiência do usuário.

Vamos ver como você pode implementar essas duas funcionalidades no seu projeto.

---

2. Copiar Conteúdo para a Área de Transferência

Copiar texto para a área de transferência com um clique é uma funcionalidade simples de se implementar. Usaremos a API navigator.clipboard.writeText() do JavaScript para realizar essa tarefa.

Exemplo de Código:

<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Ação</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="item1">Conteúdo do Item 1</td>
            <td><span class="copy-btn" onclick="copyToClipboard('item1')">Copiar</span></td>
        </tr>
        <tr>
            <td id="item2">Conteúdo do Item 2</td>
            <td><span class="copy-btn" onclick="copyToClipboard('item2')">Copiar</span></td>
        </tr>
    </tbody>
</table>

<script>
    function copyToClipboard(elementId) {
        var text = document.getElementById(elementId).innerText;
        navigator.clipboard.writeText(text).then(function() {
            alert("Conteúdo copiado: " + text);
        }, function(err) {
            alert('Erro ao copiar o conteúdo: ', err);
        });
    }
</script>

Explicação:

1. HTML: Criamos uma tabela com itens e botões de cópia ao lado de cada item.
2. JavaScript: A função copyToClipboard utiliza o navigator.clipboard.writeText() para copiar o conteúdo de um elemento específico.

Quando o usuário clica em “Copiar”, o texto correspondente é copiado para a área de transferência, e uma mensagem de confirmação é exibida.

---

3. Colar Conteúdo no Campo de Input

Agora, vamos ver como você pode colar o conteúdo da área de transferência diretamente em um campo de texto. Isso é útil, por exemplo, em formulários onde o usuário precisa colar informações copiadas.

Usaremos a API navigator.clipboard.readText().

Exemplo de Código:

<label for="inputField">Campo de texto:</label>
<input type="text" id="inputField" placeholder="Clique no botão para colar o conteúdo">
<span class="paste-btn" onclick="pasteFromClipboard()">Colar</span>

<script>
    function pasteFromClipboard() {
        navigator.clipboard.readText().then(function(text) {
            document.getElementById("inputField").value = text;
            alert("Conteúdo colado: " + text);
        }).catch(function(err) {
            alert('Erro ao colar o conteúdo: ', err);
        });
    }
</script>

Explicação:

1. HTML: Temos um campo de input e um botão para colar o conteúdo.
2. JavaScript: A função pasteFromClipboard lê o texto da área de transferência com navigator.clipboard.readText() e insere o valor no campo de input.

---

4. Considerações Finais

A interação com a área de transferência é extremamente útil em várias situações. A combinação dessas duas funcionalidades — copiar e colar — torna sua aplicação muito mais prática e interativa para o usuário.

Com essas implementações, você já está pronto para adicionar a funcionalidade de copiar e colar conteúdo diretamente na sua página web!

---