Add support for optional segment entries/lengths

[toddanglin]

First, great plug-in Brian! Thanks for creating this for NativeScript. Really like it.

As an extension, how could this plugin be extended to support "optional" entries between separators? As an example (and my current scenario), IP addresses. Mask would be:

999.999.999.999

And separate could be just a "space" resulting in a masked box that looks like:

. . .

A valid entry could be 192.168.100.100, completely fulfilling the mask. But with IP addresses, you might also have input like 10.10.1.1.

In its current form, it seems like it's difficult to "tap" directly in to another segment in the mask IF the previous mask is only partially completed. So...

10_.___.___.___

After typing 10, trying to tap in to the second segment will throw the cursor to the end of the text field. If you then tap and hold to refocus in another segment, the cursor will jump back to the first segment after typing another number. See the gif below for an illustration of the cursor behavior.

Not sure how hard it would be to change this behavior. Definitely an "advanced" scenario. I guess solving it would also open the door to supporting indeterminate length strings, like email addresses:

aaaa@aaaa.aaaa

Where each of the aaaa segments could be any length.

Thanks again for your contribution to the {N} community. Hope this idea helps inspire future iterations. :)

[bthurlow]

I'll have to dig into it and see what possibilities I have. When I built this, I never had any intention of using variable length masking sections. However, your ip and email example do have me thinking.

I'll keep this updated as to what I'm able to come up with and of course anyone else in the community is welcome to contribute to this as well.

[toddanglin]

Definitely an enhancement. Totally get that it's out of scope of the original widget.

One simpler solution might be to allow arbitrary RegEx without providing the actual input mask. Maybe it's two new properties:

showInputMask: boolean
regEx: string (if set, override any auto-generated regEx from the mask property)

The primary value of showInputMask = false is that the text field would still prevent users from typing invalid characters (as per the RegEx) while providing a simple way to check for valid input. It would also allow this text field to be used for other arbitrary inputs (like name, age, etc) where you want to prevent specific character inputs.

I'll look at the source and contribute if I can. Looking at the history of Telerik "Masked Input" controls, it does seem the IP address input is one of the hardest to support. :)

[bthurlow]

That would be a good start, but we'd have to look deep into the automatic cursor placement or we may just have to disable it when showInputMask === false. This would essentially just turn the field into a validation field.

Would probably need to look at the keyboard chooser code too, to make sure we fire the event when the cursor moves if the showInputMask is false.