Thursday, January 29, 2015

Simple input mask which works with angularJS

Input masking fields in your forms is a good way to ensure users enter the data correctly, in the right format along with the added bonus of input being locked down to certain characters. Fields such as phone numbers, dates, social security numbers along with other fields which require data in a certain format can benefit from using an input mask, as the visual prompt helps ensure users are entering data correctly (and it provides another level of validation).

The jquery.inputmask plugin is a simple solution which will slot nicely into any project and has the added bonus of not conflicting with angularJS. The input mask only becomes visible once the user hovers over the form element, or places the cursor inside it:

You can also use the HTML 5 placeholder text with this library and that text will show whenever the user is not hovering or active in the form field. It also works with date picker fields (as long as the date picker element and input mask have the same format).
In the example above there are two input masks defined, the first one accepts 3 sets of numeric characters and the second takes 3 numeric characters followed by an alpha character.

No comments:

Post a Comment