« Sharepoint List Handlers Under Load
The world has standards for a reason »

CSS Masks for your TextBoxes

Although I have been somewhat under-impressed by the ASP.NET AJAX library, I have been pleasantly surprised by the ASP.NET AJAX Control Toolkit, and especially with the masked edit boxes.

The idea behind the masked edit boxes is to provide a visual queue to the user as to how their input should look. This visual queue would also enforce the format of the users input.

For example, a phone number field. Below is an example of the ASP.NET AJAX “MaskedEdit” control that shows the user how the data should look, and even prevents the user from entering anything but numbers.

The first image is how the data looks directly from the database.

This image shows how the MaskedEdit highlights the field that holds the cursor, and the desired format for the data.

This image shows a field waiting for input.

This image shows how the data mask is overwritten by the users input.

Using the MaskedEdit control is beyond easy. It is simply another server side control that is dragged onto your ASP.NET page, and then associated with a text box, along with the desired mask type (date/phone/money/etc…).

I know it is mostly eye candy, but the user reaction to these controls has been extremely positive. It just seems to make the user feel less in the dark.

I wanted to get around to reverse engineering this before I wrote anything about it, but I have not had the chance yet. Hopefully that will be soon.

This entry was posted on Monday, March 19th, 2007 at 6:45 pm and is filed under Web Development, ASP.NET. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

6 Responses to “CSS Masks for your TextBoxes”

  1. Bryan Says:
    May 7th, 2007 at 5:19 pm

    The one problem you DID NOT mention is that the MaskedEditExtender DOES NOT have a masktype of “PhoneUS” (for U.S. phones), and neither can one be specificed.

    What good is MaskedEditExtender when phone number is not displayed AS it is entered. MEE is lousy. Period.

  2. Alan Says:
    May 7th, 2007 at 5:30 pm

    I agree with Bryan.
    MaskedEditExtender shows a phone number as 4085551212 instead of (408) 555-1212 when the user exits the text box.
    You noted that “phone” is an available MaskType. This is highly inccorrect. Setting MaskType to phone causes a client-side error.

    The inability to show the phone number as (408) 555-1212 makes MaskedEditExtender practically useless; Microsoft’s “brilliant” engineers decide FOR YOU instead of letting you decide what is best.

  3. Administrator Says:
    May 7th, 2007 at 8:02 pm

    I would like to point out that two comments that are 11 minutes apart from the same IP address, with an e-mail address one character off, counts as a pathetic and lame attempt to agree with oneself. Although I would like to spend more time making fun of you, I will end this by pointing out that these are not Microsoft supported or created components, but community created and maintained. Open for anyone to make the changes that they desire.

  4. Brian Says:
    May 25th, 2007 at 12:32 pm

    There is a ClearMaskOnLostFocus attribute that when set to false will not clear the mask on lost focus.

  5. Dave Schinkel Says:
    July 6th, 2007 at 11:37 pm

    Useless? I think it’s smart. Who want’s to have to parse through and get rid of the () - - when trying to submit the damn data to the database! Did ya think about that?

  6. Mike Says:
    September 20th, 2007 at 2:21 pm

    Jeff:

    I’m trying to get this very thing to work on my site, but I can’t see the image of your sample code. Any chance you could send that (sample code) to me, please? Also, is it possible to have the mask show as “(999) 999-9999″ instead of “999-999-9999″ w/out modifying the source in MaskedEditBehavior.js and having to recompile DLLs? Up to this point I’ve tried validating regular expressions, but to no avail.

    Any help is greatly appreciated.

    Thanks,
    Mike