oziCopy

Version: 3.1.0 (v1) — Discontinued in v2

⛔ Discontinued in v2

ozi-copy is not part of ozi-ui v2. It was a trivial behavior that did not justify library code — and it carried a FontAwesome icon dependency.

Replacement: two lines of Alpine or vanilla JS, with no dependency at all.

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

Need it to work with dynamic DOM (injected by ZLD, a modal or an offcanvas)? Use a single delegated listener on document — equivalent to the v1 behavior's binding:

<span data-copy="api-key-123">api-key-123</span>
<button type="button" data-copy-trigger="api-key-123">Copy</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 = '✓ copied';
        setTimeout(function () { btn.textContent = old; }, 1500);
    });
});
</script>

The plugin remains available in the frozen v1 (tag v1-final) and receives no further updates. The documentation below refers to that version. See the migration guide.

Description

Plugin for copying text to the clipboard with visual success or error feedback. Supports copying by direct value in the attribute, by reference to a separate content element, by input value, and by decoded HTML. Uses navigator.clipboard with automatic fallback via execCommand('copy').

Examples

[1] Direct value

The text to copy is defined directly in the data-ozi-copy-value attribute.

<div data-ozi-copy-value="ABCDE-12345-FGHIJ">
    Copy code
</div>

[2] Trigger + content — text

The trigger references a separate content element using the same identifier.

<button type="button" data-ozi-copy="codeA">
    Copy code
</button>

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

[3] Trigger + input — copies the value

When the referenced element is an <input>, the plugin automatically copies the field's value.

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

<button type="button" data-ozi-copy="codeB">
    Copy input value
</button>

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

When content is in escaped HTML, the html-decode mode decodes it before copying.

<button type="button" data-ozi-copy="codeC">
    Copy decoded HTML
</button>

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

The copied content will be <div class="box">Hello</div> — already decoded.

Features

• Direct value copy — text defined in the attribute itself
• Reference copy — trigger linked to a separate content element
• Input copy — automatically copies the value of <input> fields
• HTML decode — decodes HTML entities before copying
• Success visual feedback — feedback to the user after successful copy
• Error visual feedback — feedback in case of failure
• navigator.clipboard — modern API with HTTPS support
• execCommand fallback — compatibility with legacy browsers

HTML Attributes

[1] Copy Modes

Action Flow

Direct value mode:

1. User clicks on the element with data-ozi-copy-value
2. The attribute value is copied to the clipboard
3. Visual success or error feedback is displayed

Trigger + content mode:

1. User clicks on the trigger with data-ozi-copy
2. The plugin locates the data-ozi-copy-content element with the same identifier
3. Reads the text, value (if input) or decoded HTML (if html-decode)
4. Copies to the clipboard
5. Visual success or error feedback is displayed