Digital Handyman

Masked Input: Visually Enforcing Input Data Formats

This week it seems like I spent a lot of time working on ways to improve the UI of Drupal. I have found that one of the most time-consuming aspects of Drupal development is modifying the out-of-the-box elements to meet a client's requirements or to make it more intuitive for the end user. This week, specifically, I was figuring out how to implement the Masked Input jQuery plugin and Drupal module. For more details on some of the technical issues I ran into, see my post on Stack Overflow.

If you haven't heard of Masked Input, you are going to want to check it out. Masked Input is a jQuery plugin that uses a pattern to automatically insert certain characters into an input field. For example, if you are having a user input a phone number, you may want them to enter the phone number as 555-555-1212, but not 5555551212 or (515) 555-1212. With Masked Input, the user would only enter the digits of the phone number and the rest of it would already be shown and is not able to be deleted. In this way, it forces the user to enter the data in exactly the format you want, while at the same time visually suggesting the required format. This greatly reduces the opportunity for the user to enter the data incorrectly. In turn this means you won't have to reload the page or flash a nasty red alert at them asking them to correct their entry.

Masked Input is the type of javascript and jquery plugin of which I expect we are going to see a lot more - plugins which cleverly figure out how to enhance the user experience by showing the user what do rather than telling them. It helps to address the problem of users not reading instructions on forms.