html
html copied to clipboard
whatwg
Feature proposal: input[mask]
What is it?
I propose that <input> should have an attribute called mask that 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 Backspace key
Take example (123)|4 where | is caret position; Pressing backspace might:
- delete the
)character breaking the mask pattern - delete
3, move the4in its place and optionally move caret before) - move caret before
)and nothing else
Handle Delete key
Library inconsistency is even worse with the Delete key; ex. (123|)4 where | is caret position
- delete
)breaking the mask pattern - move caret after
)and nothing else - delete the
4and move caret after) - delete the
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 :mask or similar pseudo selector could be used to select and style the mask of an input.
Current implementations?
- JS: Cleave.js
- JS: imaskJS
- JS: input-format
- C#: MaskedTextBox
- Excel: has one too, syntax is similar to C#
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.
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.
Does anyone know how to proceed? I know that for Javascript, I would go to TC39 and create a proposal, but I am not sure how to continue in the case of a HTML feature...
If you're coming from a TC39 background, https://whatwg.org/stages might be helpful.
I thought I understood it, but maybe I don't. I thought I had to create a git repository with spec, but I found no template. Also, I found this: https://whatwg.org/faq#adding-new-features, which says that after creating an issue on GitHub, there is nothing more I can do (other than looking for more support).
@domenic, would you please guide me through a bit of the process?
To keep it here, there is a wider proposal by @keithamus referencing this issue https://open-ui.org/components/richer-text-fields.explainer/#input-masking. He made an announcement on Twitter https://x.com/Keithamus/status/1836361852630024440
