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();
InitializeTextbox( "txtAcceptNonnegativeIntegerBox",
InputType.NonnegativeInteger);
InitializeTextbox( "txtAcceptWholeNumberBox", InputType.WholeNumber);
InitializeTextbox( "txtAcceptCurrencyBox", InputType.Currency);
InitializeMaskEdit( "txtPostalCode", "$A$d$A $d$A$d");
InitializeMaskEdit( "txtTelPhone", "($d$d$d)$d$d$d-$d$d$d$d");
InitializeMaskEdit( "txtCarNumber", "$$A*$d$d$d$d$d");
InitializeMaskEdit( "txtDateTime1", "$d$d$d$d-$d$d-$d$d");
InitializeMaskEdit( "txtDateTime2", "$d$d/$d$d/$d$d$d$d");
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.