Understanding Mask Options in jQuery Mask Editor

[Infragistics] Murtaza Abdeali / Wednesday, May 18, 2011

The jQuery Mask Editor control is quite useful when you are trying to accept a strict input from a user that contains letters, numbers in a specific order, case with length restrictions..etc. The property to setup the mask editor control to specify such a strict data entry is called InputMask. The jQuery MaskEditor control can be used in any JavaScript/HTML based applications using jQuery, it also has an ASP.NET MVC helper extension to make is easy for ASP.NET MVC development.

When setting up mask, each character in the mask has a unique meaning to it, here is the list of all the accepted mask characters and their role.

Character Description Sample Mask Possible Entry Values
0 Digit (0 through 9, entry required; plus [+] and minus [-] signs not allowed). (000) 000-0000 (206) 555-0248
9 Digit or space (entry not required). 9999 2 0
# Digit or space (entry required). #### 2000
L Letter (A through Z, entry required). >LL00000-0000 DB51392-0493
? Letter (A through Z, entry optional). >L????L?000L0 MAY R 452B7
A Letter or digit (entry required). (000) AAA-AAAA (206) 555-TELE
a Letter or digit (entry optional). aaaaaaaaaa Item 123
& Any character or a space (entry required). ISBN 0-&&&&&&&&&-0 ISBN 1-55615-507-7
C Any character or a space (entry optional). CCCCCCCCCCC Hello There
. , : ; - / These characters are used to separate numeric thousandths, decimals, and date/time values. The actual character used depends on the regional settings specified in Microsoft Windows Control Panel. 0,000.00 1,999.45
< All characters that follow this character will be converted to lowercase. Subsequent < characters will actually toggle the lowercase functionality. For example, the mask < td> >L<?????????????? Maria
> All characters that follow this character will be converted to uppercase. Subsequent > characters will actually toggle the uppercase functionality. For example, the mask >LL>LL>LL will cause the uppercase functionality to be turned off for the second LL characters, but then turned back on for the third LL characters. >L<?????????????? Joe
\ Characters that follow this character will be treated as a literal part of the mask until the next \ character appears. A\AB\B\\\##\99 xABB\# 91


Setting it up in an HTML page and then use it as a jQuery plugin, you need to specify a input element in your DOM. On page load it will be converted into the mask editor control.

<input id="MaskTextBox" type="text" />

In order to convert it into a jQuery control, you can use the id to grab the element, and then call the plug-in to convert it into a mask editor control. You can also specify some options like the nullText, and set the width. Also, you can use the inputMask option to setup the mask for the editor control to use.

$(function () {
    //Input Masks: 
    //Telephone : (000) 000-0000
    //Telephone w/ Exension : (000) 000-0000 Ext. 99999
    // Social Security : 000-00-0000
    //Zip Code : 00000
    //US State Code : >LL
            nullText : "Enter Phone Number...",
            inputMask: "(000) 000-0000",
            width : 150


In ASP.NET MVC view, you can use the ASP.NET MVC 3 Razor syntax to initialize the same control as it is done in the HTML above. You also get intellisense within Visual Studio, which makes it easy to learn the control options when you are just getting started. In order to do exactly the same, the Razor syntax will look like the following.

    .NullText("Enter Phone Number...")
    .InputMask("(000) 000-0000")

You can use the mask editor control for displaying and editing a specific property in you Model field via the MVC “EditorFor” extension. This extension is available for all jQuery editors, not just for the mask editor. You can also use it within a strongly-typed view. In both the cases, you can use the “MaskEditorFor” method to connect to your model field. To do that, you can change the helper method accordingly:

@model Mvc3WebApp.Models.Person
@(Html.Infragistics().MaskEditorFor(model => model.PhoneNumber)
    .NullText("Enter Phone Number...")
    .DataMode( MaskEditorDataMode.RawText)
    .InputMask("(000) 000-0000")

In the end, the outcome in all the three different code execution above will be the same, the browser will render a jQuery mask editor control with an input mask of a telephone number set, and restricting the user to enter anything but a valid 10 digit phone number. With other mask characters, you can setup the controls for other commonly needed input scenarios, or specify a custom one for use within your applications.