The jQuery masked input plugin lets you improve the form filling experience by providing an elegant solution to inputting data for fields such as date and telephone number, etc. Use a single text box with built in formatting cues and achieve effective error prevention instead of using the usual combination of dropdowns or a calendar date picker.
How do you let users input date in your form?
The usual method
While designing a form that requires the user to enter date, you probably:
- Use three dropdown- one for day, month and year each. The concern here is visual clutter. Dropdowns are as visual structures as compared to a text field or a calendar date picker icon.
Not to mention the fact that dropdown lists are prone to inadvertent changing of the value selected by the user if a mouse with a scroll wheel is used. It won’t happen all the time but definitely does happen some times, as I have noticed in a number of usability tests (usually missed out during the session but I’d catch it while observing the tapes later).
- Alternatively, you may use a calendar date picker. The issue here is that it might not be as intuitive as text field entry is for novice users, depending on its implementation.
The ideal method
The ideal method would be to utilize the ‘forgiving format’ UI pattern- a simple text field that allows users to enter the date in the any format they please leaving the system to parse it in the back end. In fact, Tumblr does it this way.
A smart solution- the jQuery masked input plugin
In case the ideal method is not possible for you to technically implement, and you use jQuery for your website or web application, the jQuery masked input plugin is perfect for you.
What does it do?
The masked input plugin for the jQuery javascript library lets you apply an input mask to a text field when you need the user to enter data in a particular format for that is defined by both characters and symbols.
And what is a mask?
A mask is made up of literals and definitions. Mask definitions are the characters the user is allowed to enter. Mask literals are the characters that cannot be edited by the user and are placed within the text field to format the box.
For example, lets say you want the user to enter date in dd/mm/yyyy format. dd,mm and yyyy are mask characters and / is the mask literal.
How does the text field look after applying the input mask?
Can I see it in action?
Check the demo for the jQuery input masked plugin applied text fields used to input Date, Phone number, Tax ID, SSN, Product Key and Eye Script.
Or you could watch a video by Luke W of the input mask in action.
Leave a Reply