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).
$(document).ready(function(){ $("#MyField").inputmask("999-999-999"); $("#OtherField").inputmask("999a"); });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.