Vanilla Breeze

data-accept

Restrict input to allowed characters without enforcing a rigid format. Named presets for phone, date, credit card, and more. Custom character classes via bracket syntax.

Overview

The data-accept attribute restricts an input to a set of allowed characters without enforcing a rigid format. Unlike data-mask, which auto-injects separators and dictates the shape of the value, data-accept lets the user format freely — only invalid characters are blocked.

How It Works

Add data-accept with a preset name or custom character class to any text input. The init script:

  1. Resolves the allowed character set from the preset name or bracket syntax
  2. Intercepts beforeinput events to block invalid characters before they appear — no flicker, no cursor jump
  3. Filters pasted text character-by-character, keeping only valid characters
  4. Falls back to input event stripping for browsers where beforeinput is not cancelable
  5. Handles IME composition events to avoid interfering with multi-byte input
  6. Sets inputmode automatically from the preset
  7. Stores the regex source in data-accept-pattern for external consumption

Attributes

Attribute Type Description
data-accept string Preset name or custom character class (e.g., [0-9a-fA-F]).
data-accept-pattern string Set automatically. Contains the regex source for the allowed character set.
data-accept-init boolean Set automatically to prevent double-binding. Do not set manually.

Presets

The following presets are available out of the box:

Preset Allowed characters inputmode
digits [0-9] numeric
alpha [a-zA-Z] text
alphanum [a-zA-Z0-9] text
phone [0-9+()- ] (digits, plus, parens, hyphen, space) tel
date [0-9/-.] (digits, slash, hyphen, period) numeric
hex [0-9a-fA-F] text
currency [0-9.,] (digits, comma, period) decimal
cc [0-9 -] (digits, space, hyphen) numeric

Custom Patterns

For character sets not covered by a preset, pass a character class directly. The value must start with [ and is parsed as a JavaScript RegExp.

With Form Field

Wrap in <form-field> for validation feedback, helper text, and required indicators.

Paste Behavior

When the user pastes content, the filter runs character-by-character: valid characters are kept, invalid ones are silently stripped. The paste uses document.execCommand('insertText') to preserve the browser's undo history.

data-accept vs data-mask

Both attributes filter input, but they serve different purposes:

data-mask data-accept
Separators Auto-injected User types them
Format Rigid, one shape Flexible, user decides
Core logic Strip → reformat → reposition Block or strip invalid chars
Use when You dictate the format User picks the format

If both data-mask and data-accept are present on the same input, data-mask wins and a console warning is logged.

Dynamic Elements

Accept inputs added to the DOM after page load are automatically enhanced via a shared MutationObserver. No manual initialization is needed.
↑