OneTaskBy Tim King · Updated
Input Mask Generator
Phone, Date and Card Number Masks
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Input Mask Generator works
This input mask generator formats phone numbers, dates and cards as people type. Masks add the spaces, dashes and brackets so users only type the characters that matter. Choose a preset for phone, date, card or postcode, or write your own pattern, then copy a field that formats as you type with a script small enough to read in a minute. Type digits into the preview to see it work.
Input mask: formatting while people type
A mask is a template string where some characters are placeholders and the rest are literals.
This generator uses three placeholder tokens: 9 accepts a digit, A a letter and * either.
Every other character — space, slash, dash, bracket — is a literal that the script inserts for
the user.
How the script formats. On each input event it walks the mask and the typed value
together. For a literal it appends the literal; for a token it skips ahead in the typed value
until it finds a character that matches, appends it, and moves on. Characters that never match
are dropped, so pasting "+44 (0)7700 900123" into a UK phone mask still yields the digits in
the right slots. Letters matched by A are upper-cased, which is what postcodes and most codes
expect.
Backspace is left alone. The formatter returns early when the input event was a backward deletion. Without that, deleting the character after a literal would re-insert the literal immediately and the user could never get past it. Deleting works character by character, and the next typed character reformats everything.
maxlength and inputmode. The input's maxlength equals the mask length so the field cannot
overflow the pattern. When the mask has only digit tokens, inputmode="numeric" brings up the
number keypad on phones. Type stays text, because type="number" strips leading zeros and
rejects the spaces and dashes the mask inserts.
The hint. A short <small> under the field states the expected format and is linked with
aria-describedby, so screen reader users hear it when the field gains focus. The placeholder
shows an example value but disappears on typing, so it is not enough on its own.
Custom masks. Select Custom and edit the mask field. AAA-9999 gives three letters, a dash
and four digits; 99:99 a time; 999.999.999-99 a Brazilian CPF. The placeholder is generated
by replacing tokens with underscores.
Submitting the value. The masked string is what the form sends. If your backend wants raw digits, strip non-alphanumerics before saving or add a hidden input the script fills with the unformatted value.
FAQ
Why not use a library like IMask or Cleave?
Those libraries handle caret positioning inside the value, dynamic masks and currency formatting, and they are the right choice if you need any of that. For a phone, date or card field where users type left to right, this script does the job in twenty lines with nothing to install.
Does the mask validate the value?
It constrains the shape, not the meaning. 31/02/2026 fits the date mask but is not a real date,
and a card mask does not check the Luhn digit. Validate on submit as well — the
Form Validation Generator covers patterns and messages.
What happens when the user pastes a formatted value?
The formatter runs on paste too, because paste fires an input event. Characters that do not
match the next token are skipped, so brackets, spaces and dashes in the pasted text are ignored
and the value is rebuilt in the mask's own format.
Can I make the literals show before the user reaches them?
That is a "fixed" or "lazy off" mask, where the field shows (___) ___-____ from the start. It is
harder to get right because the caret must skip over the underscores and backspace must clear the
right slot. This generator deliberately keeps literals appearing as you type, which avoids those
edge cases.
How do I support two mask lengths, like 10- or 11-digit phone numbers?
Write the mask for the longest form and drop maxlength, or switch masks in script based on the
first digits. Alternatively skip the mask entirely for international numbers, accept free text
with type="tel" and normalise on the server, which is what most international sites do.
See also: all Forms & Inputs tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Colour.
Related tools
Floating Label Form
Material-style floating labels in pure CSS with outlined, filled and underline variants.
Password Visibility Toggle
Show/hide password button with eye icon or text and correct ARIA state.
Custom Radio Button Builder
Accessible custom radio buttons as dots, cards or pill segments.
Dual Range Slider
Two-thumb min/max slider for price filters, no library needed.
Form Progress Bar
Step indicators and progress bars for multi-step forms and checkouts.