Add placeholder option

[jokklan]

Hi, and thanks for a awesome library! We have a project where we started to change from jQuery to react. That meant that our old library wasn't a good fit anymore (Inputmask), which is how we found your library and switched to that. However I was really missing the possibility to add custom placeholders while typing (instead of only consisting of the same placeholderChar, eg. "_"). This PR is a attempt at solving that, and I really hope you will help me to get it ready for merging!

This also closes existing issues like #316.

Description

This PR makes it possible to add a placeholder config value to createTextMaskInputElement. The placeholder should be a string like 'dd/mm/yyyy'. It's important that the static parts of the placeholder matches the static parts (non-regexes) of the mask array. Eg. { mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/], placeholder: 'dd/mm/yyyy' }. Adding a placeholder with guide set to false, should not change the behaviour in any way, as the placeholder simply overrides the the mask guide placeholder.

It works by creating a placeholderCharPositions array of boolean values, to compare to, instead of comparing to placeholderChar, when checking if it's a placeholder character, a static character or a input character. The placeholderCharPositions array is made by comparing the mask characters with the placeholder characters, and those that are identical will be considered static and not placeholder chars. Another way of doing this is simply saying every position that has a regex in the mask is a placeholder char, not sure if you like that solution better.

React Example

<MaskedInput
  mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]}
  placeholder='dd/mm/yyyy'
  className='form-control'
  id='1'
  type='text'
/>

Missing

• [x] Feature for adding placeholder
• [x] Argument validation for placeholder (length should be the same as mask array length)
• [ ] Tests
• [ ] Documentation

[lozjackson]

@jokklan thanks for the PR.. looks goods.. however I haven't had time to review the code changes yet..

Is the placeholder optional, and is it backwards compatible... If you don't specify a placeholder does the component behave the same as it does currently.

[jokklan]

Hi @lozjackson.

The idea is that it's backward compatible. If you don't specify a placeholder will it use the default placeholder from convertMaskToPlaceholder with the placeholderChar (this is the only thing that placeholderChar is used for now, specifying a placeholder will override whatever is specified in placeholderChar). However I still need to test it with every addon, I have only tested with react for now.

[StefanFeser]

Hi,

Any news on this? I would also love to have this feature in the next version.

Thank you @lozjackson & @jokklan!

[dmcclurealinta]

Any ETA on having this finished?

[qibang-kooboo]

want this feature too

[jlaustill]

I need this, how can we get it merged?

[shae-wat]

ETA on this?

[ghost]

Any idea on when this can get merged? Definitely need this!

[jlaustill]

Also, I would like to point out that I looked through every Masking library I can find for react and none of them support this feature currently. Hence, getting this merged will make this library stand out and have a differentiating feature.

[jokklan]

Sorry, I had forgotten all about this, and haven't had time to finish it. I might go back and finish it after the summer vacation period, but if anyone wants to help, please feel free continue on this branch :)

[jlaustill]

@jokklan what would be the best way to help you out? If someone was to fork your fork and PR back to your branch would you accept that?

[jokklan]

@jlaustill yes definitely, that would be much appreciated!

[eyanez1230]

Hi, is there any update on this? We also need this feature and as mentioned above, no other library does this. How can we help to get this feature merged?

[andjiev]

Any update on this?

[franbueno]

I'd love this feature too