Reveal mask characters the moment they are relevant

[designosis]

This is a minor UX improvement suggestion.

With any masked input (in this example, a U.S. number ... $('input').mask('(000) 000-0000');), let's say the user types 213 ...

At this point, the area code is complete. The user should now see (213) |, with the closing parenthesis followed by the cursor.

Once they enter the next 3 digits of the phone number ...

... it again is more intuitive to reveal the following mask character (the -) followed by the cursor: (213) 555-|

[igorescobar]

Thanks for the suggestion @neokio!

[sineld]

+1 for suggestion

[lurchpop]

please implement this. this is the only feature cleave.js has up on this library. at least suggest a hack? #532 also asking for this

[miken32]

I got this working for my purposes, if anyone is interested in taking a look. I don't use any options like reverse or recursive, so I don't know how it will work with those. This requires you set preemptive=true in the options object, or data-mask-preemptive="true" in HTML, though I can't imagine why anyone would not want this as default behaviour.

https://github.com/miken32/jQuery-Mask-Plugin/commit/7aade19cdc8288d02eed47a64effea4a5a206824

[RolandBende]

Very big +1 for suggestion. I think this would be a major UX improvement!

My case was:

• I had to deal with a 3 part pattern, only numbers, between the parts the caret "-"
• I put a placeholder text in the input field with a good example including numbers and the caret.
• I used input type="tel" to trigger number keypad on mobile devices. (With input type=number masking not working!)

I sent my form page for user testing. The team gave the following feedback: A lot of user tried to put "-" char. after the first part of the pattern. The mobile device users can not find "-" char. on number keypad on ios. They stucked at this point for minutes.

---

For temporlaly fix i used miken32 code modification.

[iflow]

Another, further improvement to this would be to display ALL following mask characters of the placeholder during typing.

E.g.

mask('00.00.0000', { placeholder: "__.__.____" });

Expected on typing: 30.12.____

Current behaviour: If you start typing, the placeholder disappears. Better UX: If you type, show the remaining placeholder or mask (configureable).

[ahait]

Another, further improvement to this would be to display ALL following mask characters of the placeholder during typing.

E.g.

mask('00.00.0000', { placeholder: "__.__.____" });

Expected on typing: 30.12.____

Current behaviour: If you start typing, the placeholder disappears. Better UX: If you type, show the remaining placeholder or mask (configureable).

I totally agree! I was just looking for that feature also.