Masking inputs using Jquery – Jquery plugin
Taking input from the user is essential in web world. In some cases user input is the only content generation channel for certain websites and asking inputs from user becomes more important in those cases. You need to present all input elements in such a way that user does not make any mistakes and at the same time it should not be difficult as well.
Some inputs requires confirmation with certain format like dates, phone numbers and some specific Ids like SSN etc. If these inputs are done in certain format, data can be handled in better manner. These values without format confirmation can be used but not smoothly for interpreting them. I tried to use this Jquery plugin which provides masking of inputs and helps user to fill these values.
Below is an example of usage and code:
jQuery(function($) { $.mask.definitions['~']='[+-]'; $('#date').mask('99/99/9999'); $('#phone').mask('(999) 999-9999'); $('#phoneext').mask("(999) 999-9999? x99999"); $("#ssn").mask("999-99-9999"); $("#product").mask("a*-999-a999"); });
a – Represents an alpha character (A-Z,a-z)
9 – Represents a numeric character (0-9)
* – Represents an alphanumeric character (A-Z,a-z,0-9)
Download the script from here and more details can be found here
Most Commented Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Lame.
1) The default behavior is to erase all user input if I don’t completely fill out the required section of the mask!? This is bad programming. You do not erase user input. Suppose I fill in the 8 digits of my phone number and then accidentally hit tab, why should I lose everything I typed?
2) There is no way for the user to understand where the “required” mask characters end. Suppose I had just lost those 8 digits of my phone number and had to re-enter that data. I may now be leery to leave any _’s unfilled in the phone number + extension field.