I've found some researches about input masks in general but they all say just how to let user type text correctly. But I find it very frustrating when I need to correct an input (press backspace) and instead of deleting previously typed in character it deletes additional symbol from mask or just skips it.
For example:
The mask is: ___-____.
I type 124. It looks like 124-|____. ( | is a cursor position)
And then I notice that I skipped number 3. So I click backspace.
What I expect to see is 12|_-___, then type 34567 and get 123-4567 (obvious, right?).
Instead I get 124|-___ (just moved cursor) or even worse just 124 (deleted minus) sometimes..

So my question is, has anyone seen some research or any ux article about it or at least more complete ux study of input masks (and not just obvious statements that they are nesessary)?

  • I don't have the links at the moment but generally studies show it is better to just let the user type in whatever format they prefer and then perform validation after the fact to clean it up. – James Coyle Jan 21 '20 at 10:50

Input masking removes users’ confusion about what format is required for restricted inputs, such as phone numbers, along with providing verification and legibility as users type — making typos easier to spot.

Providing an input mask will not only ensure that values are entered correctly, but was also observed to allay users’ up-front concerns on correct formatting, and to generally expedite form completion.

Please head over to Baymard's website to consume the full research on Form Field Usability: Consider Using Localized Input Masks for ‘Phone’ and Other Restricted Inputs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.