jQuery Masked Input Plugin- Increase usability, input masks for text fields

Summary
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:

  1. 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).

  2. 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.

The Tumblr date field allows the user to enter date in free form and parses the format in the backend

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?

This is how text boxes appear when using the jQuery masked input plugin

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.

6 Comments

  1. nouky said on October 13, 2009 at 11:50 pm |

    Great plugin, how can I validate these inputs?

  2. max said on November 18, 2010 at 5:51 pm |

    ok. and what about using mask with such characters “a”, “9″, “*”???

  3. macem said on January 28, 2011 at 8:46 pm |

    Mask plugin is usable for empty input, when we create something.

  4. Gexa said on September 13, 2011 at 4:10 pm |

    This plugin unfortunately incompatible with jquery.tools framework because of the expose function in it. The tools extends jquery with a $.mask namespace and mask for inputs isn’t working…

  5. Luis Pumaricra Diaz said on November 21, 2011 at 8:58 pm |

    Hola muchas gracias por la info…

  6. Sabin said on January 13, 2012 at 4:07 am |

    I have sucessfully implemented this feature in my sharepoint list. It works great except one problem. Problem is if i enter 01/01/2012 and save it. It displays it as 01/01/3912. Has anybody ever encountered with same issue. Is there some suggestions i can follow.

    Any help will be greatly appreciated…

Have something to say? Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*