oziCopy

Versão: 2.3.1 — Atualizado em: 2026-04-25

Descrição

Plugin para copiar texto para o clipboard com retorno visual de sucesso ou erro. Suporta cópia por valor direto no atributo, por referência a um elemento de conteúdo separado, por valor de input e por HTML decodificado. Utiliza navigator.clipboard com fallback automático via execCommand('copy').

Exemplos

[1] Valor direto

O texto a copiar é definido diretamente no atributo data-ozi-copy-value.

<div data-ozi-copy-value="ABCDE-12345-FGHIJ">
    Copiar código
</div>

[2] Trigger + content — texto

O trigger referencia um elemento de conteúdo separado pelo mesmo identificador.

<button type="button" data-ozi-copy="codigoA">
    Copiar código
</button>

<div data-ozi-copy-content="codigoA">
    ABCDE-12345-FGHIJ
</div>

[3] Trigger + input — copia o value

Quando o elemento referenciado é um <input>, o plugin copia automaticamente o value do campo.

<input type="text"
    data-ozi-copy-content="codigoB"
    value="ABCDE-12345-FGHIJ">

<button type="button" data-ozi-copy="codigoB">
    Copiar valor do input
</button>

[4] HTML decodificado — data-ozi-copy-mode="html-decode"

Quando o conteúdo está em HTML escapado, o modo html-decode decodifica antes de copiar.

<button type="button" data-ozi-copy="codigoC">
    Copiar HTML decodificado
</button>

<div data-ozi-copy-content="codigoC" data-ozi-copy-mode="html-decode">
    &lt;div class="box"&gt;Olá&lt;/div&gt;
</div>

O conteúdo copiado será <div class="box">Olá</div> — já decodificado.

Recursos

• Cópia por valor direto — texto definido no próprio atributo
• Cópia por referência — trigger vinculado a elemento de conteúdo separado
• Cópia de input — copia o value de campos <input> automaticamente
• HTML decode — decodifica entidades HTML antes de copiar
• Retorno visual de sucesso — feedback ao usuário após cópia bem-sucedida
• Retorno visual de erro — feedback em caso de falha
• navigator.clipboard — API moderna com suporte a HTTPS
• Fallback execCommand — compatibilidade com navegadores legados

Atributos HTML

[1] Modos de Cópia

Fluxo de Ação

Modo valor direto:

1. Usuário clica no elemento com data-ozi-copy-value
2. O valor do atributo é copiado para o clipboard
3. Retorno visual de sucesso ou erro é exibido

Modo trigger + content:

1. Usuário clica no trigger com data-ozi-copy
2. O plugin localiza o elemento data-ozi-copy-content de mesmo identificador
3. Lê o texto, value (se input) ou HTML decodificado (se html-decode)
4. Copia para o clipboard
5. Retorno visual de sucesso ou erro é exibido