Home     About PeterBlum.com     Policies     Download a Licensed Product     Newsletter

Peter's TextBoxes Try It   Buy It
 

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:

    1. Use the TabAtMaxLength property to tab when the text fills to the MaxLength.
    2. Use the TabOnEnterKey property to tab when the user types ENTER.
    3. Use the TabOnTheseChars to define a list of characters that tab when any are typed.
    4. Use the TabByArrowKeys to advance to the next or previous field when the left and right arrow keys hit the end of text.
    5. 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.

MultiSegmentDataEntry configured for US Phone number MultiSegmentDataEntry configured for IP Address
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
Related products: Peter's Data Entry Suite  | Peter's Business Logic Driven UI ("BLD")  | Peter's Professional Validation  | Peter's More Validators
Peter's Date and Time  | Peter's TextBoxes  | Peter's Interactive Pages  | Peter's Input Security