oziCopy

Versión: 3.1.0 (v1) — Descontinuado en la v2

⛔ Descontinuado en la v2

ozi-copy no forma parte de ozi-ui v2. Era un comportamiento trivial que no justificaba código de biblioteca — y arrastraba una dependencia de iconos FontAwesome.

Sustituto: dos líneas de Alpine o JS puro, sin ninguna dependencia.

<button type="button"
        x-data="{ copied: false }"
        @click="navigator.clipboard.writeText('ABC-123').then(() => { copied = true; setTimeout(() => copied = false, 1500) })">
    <span x-text="copied ? '✓ copiado' : 'Copiar'"></span>
</button>

¿Necesitas que funcione con DOM dinámico (inyectado por ZLD, modal u offcanvas)? Usa un único listener delegado en document — equivalente al bind del behavior v1:

<span data-copy="clave-api-123">clave-api-123</span>
<button type="button" data-copy-trigger="clave-api-123">Copiar</button>

<script>
document.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-copy-trigger]');
    if (!btn) return;
    var key = btn.getAttribute('data-copy-trigger');
    var src = document.querySelector('[data-copy="' + key + '"]');
    var text = btn.getAttribute('data-copy') || (src && src.textContent) || '';
    navigator.clipboard.writeText(text).then(function () {
        var old = btn.textContent;
        btn.textContent = '✓ copiado';
        setTimeout(function () { btn.textContent = old; }, 1500);
    });
});
</script>

El plugin sigue disponible en la v1 congelada (tag v1-final) y ya no recibe actualizaciones. La documentación de abajo se refiere a esa versión. Consulta la guía de migración.

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