ozi-paste

Versão: 1.0.0 | Data: 2026-06-01 Documentação oficial: https://oziui.com

Conceito

Plugin IIFE que cola texto em um elemento destino ao clicar em qualquer gatilho HTML. O bind é feito via delegação no document — funciona automaticamente em HTML injetado por ZLD, modais ou offcanvas, sem necessidade de reinicialização.

Dependência: ozi.js (OZI.lang) Exposição: window.OziPaste | OZI.behaviors.paste

Ejemplos

[1] Pegar en input

<button data-ozi-paste-value="ejemplo@email.com"
        data-ozi-paste-destiny="#mi-input">
    Pegar correo
</button>

<input type="text" id="mi-input">

[2] Pegar en textarea

<button data-ozi-paste-value="Texto pegado automáticamente."
        data-ozi-paste-destiny="#mi-textarea">
    Pegar texto
</button>

<textarea id="mi-textarea"></textarea>

[3] Ancla como disparador

<a href="#"
   data-ozi-paste-value="TOKEN-ABC-12345"
   data-ozi-paste-destiny="#campo-token">
    Usar este token
</a>

<input type="text" id="campo-token">

Estrutura mínima

<button data-ozi-paste-value="TEXTO-A-COLAR"
        data-ozi-paste-destiny="#meu-input">
    Colar
</button>

<input type="text" id="meu-input">

Atributos

Quando o seletor retornar múltiplos elementos, usa-se .first() internamente.

Destinos suportados

Gatilhos suportados

Qualquer elemento clicável funciona — o bind escuta click via delegação.

{{-- button --}}
<button class="btn btn-secondary"
        data-ozi-paste-value="ABCDE-12345-FGHIJ"
        data-ozi-paste-destiny="#meu-input">
    Colar
</button>

{{-- anchor --}}
<a href="#"
   data-ozi-paste-value="TOKEN-XYZ"
   data-ozi-paste-destiny=".campo-token">
    Usar este token
</a>

{{-- qualquer elemento --}}
<span data-ozi-paste-value="código-promo"
      data-ozi-paste-destiny="#cupom"
      style="cursor:pointer;">
    Aplicar cupom
</span>

Feedback visual

Tooltip lateral injetado no próprio trigger com fadeOut jQuery — mesmo padrão do ozi-copy.

Eventos JavaScript

$('#meu-trigger').on('ozi:pasted', function(e, payload) {
    console.log(payload.value);    // texto colado
    console.log(payload.destiny);  // elemento DOM destino
});

$('#meu-trigger').on('ozi:paste-error', function(e, payload) {
    console.warn(payload.error);
});

API JavaScript OziPaste

// Colar via API
var ok = OziPaste.paste('#meu-input', 'valor aqui'); // → true/false

// Simular clique no trigger
OziPaste.trigger('#btn-colar');

// Via OZI.behaviors
OZI.behaviors.paste.paste('#meu-input', 'valor');

Integração com ZLD / afterRender

O bind é por delegação no document — nenhuma ação necessária após renders dinâmicos. O hook afterRender está registrado mas é no-op por design.

// Já configurado — nenhum código extra necessário
OZI.hooks.afterRender.register('behavior:paste', function () {
    // bind delegado no document — sem ação necessária
});

Integração com Livewire 4

Ao colar em <input wire:model>, os eventos input e change são disparados automaticamente — o Livewire intercepta normalmente.

<input type="text" id="campo-livewire" wire:model.live="form.codigo">

<button data-ozi-paste-value="{{ $codigoGerado }}"
        data-ozi-paste-destiny="#campo-livewire">
    Aplicar código
</button>

I18n

Via OZI.lang com fallback PT-BR embutido:

Checklist

✅ data-ozi-paste-value  — texto a colar
✅ data-ozi-paste-destiny — seletor CSS válido
✅ Destino é input, textarea ou contenteditable
✅ Seletor resolve ao menos um elemento no DOM