oziCopy

Version: 3.0.0 — Updated: 2026-05-27

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.

Copy code

Code: ABCDE-12345-FGHIJ

<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.

ABCDE-12345-FGHIJ

<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.

<div class="box">Hello</div>

<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

Attribute	Description
`data-ozi-copy-value`	Text to be copied defined directly on the trigger
`data-ozi-copy`	Trigger identifier — links to the content element of the same name
`data-ozi-copy-content`	Element whose content (or `value`) will be copied
`data-ozi-copy-mode`	Content reading mode — `html-decode` decodes HTML entities

Action Flow

Direct value mode:

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

Trigger + content mode:

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