Sometimes it is useful to format user input as they type. It provides a better experience to the user, it shows that you care about visitor’s input and you optimized your web forms like a professional and this way, it’s very unlikely the user will make any typing mistakes as it clearly shows how the input format should be. Here are 2 scripts that you can use to improve the functionality of your forms:
Masket Input Plugin allows a user to easily type in fixed width input in which you would like them to enter the information in a certain format (dates,phone numbers,social security numbers etc). It’s been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is determined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:
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)
- Source & Demo: http://digitalbush.com/projects/masked-input-plugin/
- Compatibility: Works in all CSS3 browsers and mobile devices
Formatter.js works in a similar way as the Masked Input Plugin. It was built from the ground up with no dependencies (great to use if you prefer RAW JavaScript applications). There is also a jQuery wrapper version for quick use, just in case.
Opts
- pattern (required): String representing the pattern of your formatted input. User input areas begin with
{{and end with}}. For example, a phone number may be represented:({{999}}) {{999}}-{{999}}. You can specify numbers, letters, or numbers and letters.- 9: 0-9
- a: A-Za-z
- *: A-Za-z0-9
- persistent: [False] Boolean representing if the formatted characters are always visible (persistent), or if they appear as you type.
