search

angular-ui / ui-mask

Mask on an input field so the user can only type pre-determined pattern
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html
MIT License
391 stars 257 forks source link

Optional characters should not display a placeholder #160

Open phpguru opened 8 years ago

phpguru commented 8 years ago

It would be cool if there was an option to turn the placeholder character for optional characters on/off.

For example on a phone field that takes 10 to 13 numeric digits, I'm getting this...

8008008888___

...in the input field. I would like if the last three underscores were not visible or to have a way to turn them off.

lukepfeiffer10 commented 8 years ago

I think both scenarios are goofy. It either looks like you need to enter more information or it looks like you are done but you have x number of characters left that need to be entered...

If I get some time I'll look at what this change would entail. Not sure what the effort would be to have this feature.

phpguru commented 8 years ago

I think the subtle difference here is that

it looks like you are done but you have x number of characters left that need to be entered

is not quite true. Entering 10 digits for a \d{10,13} - you are done - your input is valid. You don't need to enter more characters.

I can solve most common input questions with a tooltip separately from ui-mask. The option for config could look like { displayedPlaceholderChars: 'min' } or { displayedPlaceholderChars: 'max' } If I have \d{10,13} for a phone and want only 10 characters, I'd use the former; if I want all 13 displayed, I'd use the latter.

If it is easier than a new config option, I'd make the placeholder character count default to the minimum length of a range. In my mind, that makes more sense than defaulting to the maximum length.

It may be that providing an option to specify the exact placeholder string might be advantageous. If I could supply "__________" vs "_____________" that would solve it also. Plus, for a date field it might be useful to supply "____-__-__" or "YYYY-MM-DD" as the exact placeholder text.

lukepfeiffer10 commented 8 years ago

Entering 10 digits for a \d{10,13} - you are done - your input is valid. You don't need to enter more characters.

I was thinking more from a user's point of view say they have some information already (in their head, email, paper, etc.) and that information needs to go in your field of \d{10,13}. If you don't show 13 placeholder characters it could be misleading for the user if their information is 13 characters long.

However, I don't think it's a bad idea to have this ability because it at least allows whomever is using the library the option to choose what they want to display to the user. I might have some time today to look into the issue but PRs are always welcome too.