Restricting input by MaskEdit in IE / Firefox

Jerry.Wang

4.85/5 (11 votes)

Oct 14, 2006

CPOL

2 min read

120070

645

To provide a better user experience using MaskEdit, a textbox with restrictions, auot-trim box, and tip box, supports IE/Firefox.

Download demo project - 17.3 KB

Introduction

There is a very useful control called CXTMaskEdit in XtremeToolkit used in VC++. I managed to replant the MaskEdit to JavaScript, then I started to create the JavSscript lib myself. The only purpose is to better the user's experience.

There are several kinds of textboxes I am providing for IE / Firefox.

Textbox only accepts non-negative integer
Textbox only accepts whole number
Textbox only accepts currency (e.g., 14.22 ) and two decimal points
MaskEdit accepts special strings such as postal code, telephone number etc.
Textbox will auto-trim when it loses focus
Textbox will show tip if it is empty

Demo

Here comes the demo, please try it yourself: Click here for the demo.

Using the code

You should copy the *.js in the /JSLib/ to your project, and there is a file named "help.txt" that describes which files you need to include in your HTML pages. The Global.js is necessary.

<head>
    // ......
    <script language="javascript" src="JSLib/Global.js" 
      type="text/javascript"></script>
    <script language="javascript" src="JSLib/Textbox.Restriction.js" 
      type="text/javascript"></script>
    <script language="javascript" src="JSLib/Textbox.MaskEdit.js" 
      type="text/javascript"></script>
    <script language="javascript" src="JSLib/Textbox.Trim.js" 
      type="text/javascript"></script>
    <script language="javascript" src="JSLib/Textbox.Tip.js" 
      type="text/javascript"></script>
    // ......
</head>

And then you should initialize the textboxes when the page loads, for example:

function OnPageLoad()
{
    InitializeTrimBox();    

    // all the first parameters of the functions below are the textbox id   
    // initialize textbox only accepts nonnegative integerBox
    InitializeTextbox( "txtAcceptNonnegativeIntegerBox", 
                       InputType.NonnegativeInteger);

    // initialize textbox only accepts whole number
    InitializeTextbox( "txtAcceptWholeNumberBox", InputType.WholeNumber);

    // initialize textbox only accepts currency
    InitializeTextbox( "txtAcceptCurrencyBox", InputType.Currency);

    // initialize textbox only accepts Postal Code, such as "M1M 1M1"
    InitializeMaskEdit( "txtPostalCode", "$A$d$A $d$A$d");

    // initialize textbox only accepts telphone number, such as "(111)111-1111"
    InitializeMaskEdit( "txtTelPhone", "($d$d$d)$d$d$d-$d$d$d$d");

    // initialize textbox only accepts car number, such as "A*11111"
    InitializeMaskEdit( "txtCarNumber", "$$A*$d$d$d$d$d");

    // initialize textbox only accepts datetime, such as "2006-12-30"
    InitializeMaskEdit( "txtDateTime1", "$d$d$d$d-$d$d-$d$d");

    // initialize textbox only accepts datetime, such as "12/30/2006"
    InitializeMaskEdit( "txtDateTime2", "$d$d/$d$d/$d$d$d$d");

    // initialize tip box
    InitializeTipBox( "txtTipBox", 
      "If you do not change the password, left blank.");
}

Deficiencies

It does not support Chinese characters at this time. I would like to implement it but it is very difficult, I need to consider more.
Since Firefox does not support onpaste / ondrag / ondrop / oncut / oncontentmenu events, the user can still input an invalid string by pasting, dropping, so this script is just used to provide a better experience, and it is necessary to use ASP.NET validation controls.

History

V1.0 2006-10-10: Created.
V1.1 2006-10-15

Improvement: Renamed InputType.
Fixed bug: If there is already a value for mask edit when page loads, the value will be removed.
Improvement: Changed the Escape character to $A $a $d.
Fixed bug: Should prevent content menu and cutting in mask edit in IE.
Improvement: Added the auto-trim textbox.
Improvement: Add the tip textbox.

V1.2 2006-11-05

Improvement: Add the JavaScript object browser.
Improvement: For the InitializeXXX functions, can pass either control ID or instance.
Fixed bug: If the mask edit gets focus, the input cursor will move to the first unfilled position.
Improvement: Added the AJAX class.