kitgrose
commented
6 months ago I agree that support for input masking would really help a lot of specific kinds of input, especially long fields of nondescript numbers like credit card or serial numbers.
Our product serial numbers are in the form XXXX-XXXXX, which is much easier to read at a glance than one great big uninterrupted string. This is even more obvious when it's a 25-digit product key in groups of five, for instance.
Without support for input masking, it's very tempting to implement these fields as multiple separate fields with a bunch of Javascript to support pasting, automatically advancing through the fields as you type or backspace, etc., all of which makes the end result harder to support accessibly, and very different from website to website, depending on how conscientious the developer was.
Implemented properly, this should be able to degrade gracefully on older browsers, but provide a natural UX improvement for modern UAs.
Akxe
domenic
sroucheray
keithamus
What is it?
I propose that
<input>should have an attribute calledmaskthat would allow a developer to dictate how to display a user-defined text value.Why do we need it?
Masking input to look like a phone, credit card, postal code or others is common and wanted "nice to have" features. This proposal aims to aid developers in a very common task as well as unify the user experience across all platforms.
What inconsistency?
Handle
BackspacekeyTake example
(123)|4where|is caret position; Pressingbackspacemight:)character breaking the mask pattern3, move the4in its place and optionally move caret before))and nothing elseHandle
DeletekeyLibrary inconsistency is even worse with the
Deletekey; ex.(123|)4where|is caret position)breaking the mask pattern)and nothing else4and move caret after)4and keep caret before)Virtual keyboards and autocomplete
Virtual keyboards may use the mask to show autocomplete options masked to the user. For example, even though a phone number is just a series of digits, the autocomplete could show the values already formatted to the developer-defined mask that are (probably) better suited for displaying that type of value.
Highlighting
In the example
(123) 456 789, the()characters could have less saturated colour to signify user that they are not part of the value but rather just a reading guide. A:maskor similar pseudo selector could be used to select and style the mask of an input.Current implementations?
and many many more...
Mask syntax
I don't know, every implementation I looked at have something different. I would look towards other form oriented languages to draw inspiration, but I am not competent to decide, I used other languages only in school and last 12 years spend on JS/TS.