oziCopy

Versión: 3.0.0 — Actualizado: 2026-05-27

Descripción

Plugin para copiar texto al portapapeles con retorno visual de éxito o error. Soporta copia por valor directo en el atributo, por referencia a un elemento de contenido separado, por valor de input y por HTML decodificado. Utiliza navigator.clipboard con fallback automático mediante execCommand('copy').

Ejemplos

[1] Valor directo

El texto a copiar se define directamente en el atributo data-ozi-copy-value.

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

[2] Trigger + content — texto

El trigger referencia un elemento de contenido separado mediante el mismo 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 el value

Cuando el elemento referenciado es un <input>, el plugin copia automáticamente el value del campo.

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

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

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

Cuando el contenido está en HTML escapado, el modo html-decode lo 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;Hola&lt;/div&gt;
</div>

El contenido copiado será <div class="box">Hola</div> — ya decodificado.

Características

• Copia por valor directo — texto definido en el propio atributo
• Copia por referencia — trigger vinculado a un elemento de contenido separado
• Copia de input — copia el value de campos <input> automáticamente
• HTML decode — decodifica entidades HTML antes de copiar
• Retorno visual de éxito — feedback al usuario tras una copia exitosa
• Retorno visual de error — feedback en caso de fallo
• navigator.clipboard — API moderna con soporte HTTPS
• Fallback execCommand — compatibilidad con navegadores antiguos

Atributos HTML

[1] Modos de Copia

Flujo de Acción

Modo valor directo:

1. El usuario hace clic en el elemento con data-ozi-copy-value
2. El valor del atributo se copia al portapapeles
3. Se muestra el retorno visual de éxito o error

Modo trigger + content:

1. El usuario hace clic en el trigger con data-ozi-copy
2. El plugin localiza el elemento data-ozi-copy-content con el mismo identificador
3. Lee el texto, value (si es input) o HTML decodificado (si html-decode)
4. Copia al portapapeles
5. Se muestra el retorno visual de éxito o error