Extensive Enhancements to TextBoxes
The native TextBox control (System.Web.UI.WebControls.TextBox) outputs the HTML
tags <input type='text'> and <textarea> nicely. Users have demanded
more: the ability to filter keystrokes, limit values to only a number, show "Fill
this in" when a field is really blank, prevent pasting text, etc. All of these require
javascript.
Peter's TextBoxes provides 7 data entry web controls for textual data entry:
These controls greatly enhance your user interface with the highly requested client-side
techniques. You will find yourself replacing every textbox you already have with
these controls. Most of them can be swapped with the original ASP.NET TextBox with
little work.
Enhanced TextBox
The Enhanced TextBox is a subclass of the ASP.NET TextBox, and is intended to be
used in all places where you now use the ASP.NET TextBox. Consider converting your
existing forms to it or one of the other DES TextBoxes, as they all subclass from
the Enhanced TextBox.
The Enhanced TextBox has several useful client-side extensions:
- The Value When Blank system lets you customize how blank textboxes are displayed.
You can provide text like "Please fill this in" and a style sheet class to make
blank fields stand out. Details and Demo
- Use the Interactive Hints system to display a hint elsewhere on the page
as the focus enters the field. The hint is removed as focus leaves the field. Use
it to provide detailed data entry instructions without using much screen space.
This feature requires a license for the Peter's Interactive Pages module.
Details and Demo
- Supports the Enhanced ToolTips feature from the Peter's Interactive Pages
module. Details and Demo
- The AutoPostBack feature supports client-side validation on the validators assigned
to the textbox before submitting the page. This extends what is already supplied
in ASP.NET 2, where it can validate by group.
- The DisableAutoComplete property lets you omit the Autocomplete list from the textbox.
There are cases where Autocomplete does not belong. Supported by several browsers.
- The DisablePaste property which turns off the ability to paste on Internet Explorer
and any other browser that supports the client-side onpaste event.
- Auto tabbing to another field in several ways:
- Use the TabAtMaxLength property to tab when the text fills to the MaxLength.
- Use the TabOnEnterKey property to tab when the user types ENTER.
- Use the TabOnTheseChars to define a list of characters that tab when any are typed.
- Use the TabByArrowKeys to advance to the next or previous field when the left and
right arrow keys hit the end of text.
- Use the TabOnBackspace to tab to a previous field when the textbox is empty and
the user types BACKSPACE.
- Use the EnterSubmitsControlID property to specify a button that will be clicked
when ENTER is typed. This feature requires a license for the Peter's Interactive
Pages module.
- Smarter detection of "onchange" events. The client-side onchange event is a signal
that the textbox has changed after focus leaves the field. Validator controls and
the numeric TextBoxes rely on the onchange event. However, browsers have two limitations
that prevent them from firing the onchange event, even after a change is made:
- The Autocomplete feature on Internet Explorer does not cause it to fire. So users
who pick from the Autocomplete list do not get the immediate feedback of validation.
- When JavaScript assigns a new value to the textbox, it does not cause it to fire.
Enhanced TextBox installs code that always fires the onchange in these situations.
In addition, it has these enhancements:
- The TextAlign property lets you choose between left, center, and right alignment.
- The ToolTip supports the String Lookup System through its ToolTipLookupID property.
This provides localization on the ToolTip.
- Extended design mode tools, including the Smart Tag and Enhanced Properties Editor.
FilteredTextBox
Many text entry fields have a limited character set, such as passwords, phone numbers,
and social security numbers. Use this TextBox for those fields. You specify a set
of characters and it filters out the ones you don't want.
It inherits all properties from the Enhanced TextBox control. So you have hints,
auto tabbing, "Value When Blank", and more.
IntegerTextBox, DecimalTextBox, CurrencyTextBox, and PercentTextBox
Use these four textboxes to handle integer, decimal, currency, and percentage data
entry. These controls filter keystrokes and reformat text as the user exits the
field.
They have these features:
- Get and set values through Integer or Double properties, instead of converting
between text and number yourself.
- Optionally show spinner arrows to increment and decrement the value.
- Follow your localization rules.
- Show or hide thousands separators and currency symbols.
- Optionally prevent negative values without a RangeValidator.
- When you attach a Validator to them, the Validator automatically determines the
correct data type and follows the rules you have set on the textbox.
- It inherits all properties from the Enhanced TextBox control. So you have hints,
auto tabbing, "Value When Blank", and more.
MultiSegmentDataEntry
Use the MultiSegmentDataEntry control as a substitute for a TextBox when you have
a strongly patterned string such as a phone number, IP Address, or social security
number. Its user interface splits up the data into separate segments made of textboxes
and dropdownlists. As the user types, it provides autotabbing to move between segments,
filtering of keystrokes, spinners to advance through numbers, and even interactive
hints.
|
|
Example: U.S./Canada phone numbers
|
Example: IP Address
|
On the server side, you still interact with one string representing your data. When
you assign that string to the MultiSegmentDataEntry control, it splits it amongst
the segments. When you retrieve its value, it reassembles the segments into a single
string for you to save.
The MultiSegmentDataEntry control has extensive supports for DES's Validators and includes
the MultiSegmentDataEntryValidator to confirm that the data entered matches your
rules on each segment such as character set, minimum/maximum characters and text
is required.
The Peter's TextBoxes Module
Peter's TextBoxes is a module of Peter's Data Entry Suite.
It is included when you purchase the Peter's Data Entry Suite, or it can be purchased
separately starting at $90 per server.
If you purchase this module alone, you will get these controls:
- Enhanced TextBox
- FilteredTextBox
- IntegerTextBox
- DecimalTextBox
- CurrencyTextBox
- PercentTextBox
- MultiSegmentDataEntry
- MultiSegmentDataEntryValidator
- If you are using the native ASP.NET Validation system, it provides new versions
of the CompareValidator and RangeValidator to support the numeric textboxes. It
also includes a new validator, DifferenceValidator, which compares the difference
between numbers in two numeric textboxes.
If you are purchasing modules, the Peter's Professional
Validation and Peter's Interactive Pages modules are
recommended but not required. Peter's Professional Validation provides a much richer
set of validators, with enhanced ways to communicate to the user. Peter's Interactive
Pages adds the Interactive Hints, Enhanced ToolTips, and EnterSubmitsControlID features.
Peter's Data Entry Suite gives you feature rich
and interactive data entry web forms with over 100 web controls.
Start with better controls. Finish with better sites. |
Try It
Buy It
|
|
|