All TextBox controls within Peter's Data Entry Suite can change their appearance when they are blank. There are two properties on the TextBoxes with these settings:

• ValueWhenBlank - Contains a string that is shown when the textbox is blank. The string is removed as the user tabs in by default, although there are rules to customize that behavior.
• ValueWhenBlankCssClass - Contains a style sheet class name that is applied when the textbox is blank. The original style can be restored either as the user tabs in or after an edit is made.

This feature is similar to the TextBoxWatermark control in the AJAX Control Toolkit. Yet it has these additional benefits:

• Use the PageManager.ValueWhenBlankMode property to determine when to remove the text and restore the style sheet class.
• Since the textbox's actual value is changed, DES's controls are smart enough to recognize that the value still represents a blank textbox. For example, the RequiredTextValidator will report an error when the watermark appears.

Demo

These three textboxes are setup to use both properties. As you tab through, notice how they change. The rules are setup to remove the ValueWhenBlank text as you tab in but leave the style sheet until you add text and tab off.

TextBox:
IntegerTextBox:
FilteredTextBox:

ASP.NET Syntax for this demo

<des:PageManager id="PageManager1" runat="server" ValueWhenBlankMode="RemoveText">
</des:PageManager>
<table>
  <tr>
    <td>TextBox:</td>
    <td><des:TextBox id="Textbox2" runat="server"
        ValueWhenBlankCssClass="ValueWhenBlank" ValueWhenBlank="Fill this in"></des:TextBox>
    </td>
  </tr>
  <tr>
    <td>IntegerTextBox:</td>
    <td><des:IntegerTextBox id="Integertextbox2" runat="server"
        ValueWhenBlankCssClass="ValueWhenBlank" ValueWhenBlank="***" ShowSpinner="True"></des:IntegerTextBox>
    </td>
  </tr>
  <tr>
    <td>FilteredTextBox:</td>
    <td><des:FilteredTextBox id="Filteredtextbox2" runat="server"
        ValueWhenBlankCssClass="ValueWhenBlank" ValueWhenBlank="Required"></des:FilteredTextBox>
    </td>
  </tr>
</table>

Style sheet classes on this page

.ValueWhenBlank
{ 
  color: red;
   background-color: lightblue;
 }