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

Examples

[1] Paste to input

<button data-ozi-paste-value="example@email.com"
        data-ozi-paste-destiny="#my-input">
    Paste email
</button>

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

[2] Paste to textarea

<button data-ozi-paste-value="Text automatically pasted."
        data-ozi-paste-destiny="#my-textarea">
    Paste text
</button>

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

[3] Anchor as trigger

<a href="#"
   data-ozi-paste-value="TOKEN-ABC-12345"
   data-ozi-paste-destiny="#token-field">
    Use this token
</a>

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

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