Example 04 · Clipboard input

Paste normalization

Paste a code from a formatted message and let the component keep the valid characters without replacing the browser’s familiar one-field editing model.

Live example

Paste the whole message

Copy one of the samples above, focus the field, and paste. The core component handles normalization; application code does not intercept or block paste.

Implementation

Build this example

Use the alphanumeric configuration when incoming codes may contain letters. No page-specific clipboard script is required.

JavaScript

Initialization supplies the component’s built-in normalization; do not add a page-level handler that blocks paste.

import { initA11yOtpFields } from "./dist/index.js";

initA11yOtpFields();

HTML

The hint tells users that a complete message is acceptable.

<div class="a11y-otp" data-a11y-otp
  data-otp-length="6"
  data-otp-type="alphanumeric"
  data-otp-uppercase="true">
  <label for="paste-code">Verification code</label>
  <p id="paste-code-hint">
    Paste full messages; valid characters are extracted.
  </p>
  <div class="a11y-otp__control">
    <input class="a11y-otp__input" id="paste-code"
      name="pasteCode" type="text" inputmode="text"
      autocomplete="one-time-code" maxlength="6"
      aria-describedby="paste-code-hint" />
  </div>
  <p class="a11y-otp__error"></p>
  <p class="a11y-otp__status" aria-live="polite"></p>
</div>