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.

HTML/JavaScript

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
    $("#MaskTextBox").igMaskEditor(
        {
            nullText : "Enter Phone Number...",
            inputMask: "(000) 000-0000",
            width : 150
        }
    );
});

ASP.NET MVC

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.

@(Html.Infragistics().MaskEditor()
    .NullText("Enter Phone Number...")
    .InputMask("(000) 000-0000")
    .Width(150)
    .Render()
)

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")
    .Width(150)
    .Render()
)

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.