 |
|
| |
 |
Create a Masked Input Control
Masked input controls simplify data entry and validation, but aren't part of the standard HTML control set. However, using a little creative JavaScript, you can roll your own.
By Nicholas C. Zakas
|
|
evelopers writing Web applications run into the same problems repeatedly. One of the most prevalent is: How can you prevent users from entering illegal data? Traditional GUI applications written in C++, Visual Basic, and other RAD environments provide controls called "masked controls" that limit the type, content, or length of data users can enter. An example is the IP address control in many Windows networking dialogs, which is a combination of four three-character fields that accept only numbers. The control provides the dots between the numbers automatically. Additionally, in traditional GUI environments, you can subclass or wrap existing controls to create new masked controls. Web application developers don't have this luxury. As a group, we're tied to the standard HTML form controls, which haven't changed much since HTML 2.0. But don't worry, thanks to some creative JavaScript, Web applications can now enjoy a level of data masking constrained only by browser compatibility and your imagination.
|
|
|
 |
TALK
BACK |
|
Creating a masked edit text box in DTHML is not as straightforward as it seems at first. Do you know of other masked edit examples? Join the discussions at web.dhtml.scripting to get answers, make comments, or help others with their problems.
|
|
|
|
|
|
|
Introduction 
Exploring Textbox Behavior 
Blocking Keystrokes 
Dealing with Special Keys 
Dealing with Cut, Copy, Paste, and Undo 
Don't Forget Paste Validation 
Polishing the Mask 
