Return to the menu Select another DES Module

Demonstrates how to show a watermark when the textbox is blank

When a textbox is blank, it may be helpful to prompt the user to what is requested by inserting text. This is called a watermark. Define the watermark with the Textbox's ValueWhenBlank property.

The style sheet of the textbox can be switched when its blank to the class defined in the ValueWhenBlankCssClass property.

As focus enters the textbox, the watermark and/or style sheet class can be removed depending on the settings of the PageManager.ValueWhenBlankMode. It defaults to removing both text and style sheet.

Controls

Use this PageManager.ValueWhenBlankMode:

Textual watermark:

Style sheet when blank:

Both text and style sheet:

Source Code (C#)

<script runat="server">
   protected void Page_Load(object sender, EventArgs e)
   {
      switch (DropDownList1.SelectedIndex)
      {
         case 0:
            PageManager1.ValueWhenBlankMode = ValueWhenBlankMode.RemoveBoth;
            break;
         case 1:
            PageManager1.ValueWhenBlankMode = ValueWhenBlankMode.RemoveText;
            break;
         case 2:
            PageManager1.ValueWhenBlankMode = ValueWhenBlankMode.RetainBoth;
            break;
      }
   }
   
</script>

<style type="text/css">
.BlankText
{
   background-color: #E0E9E9;
}
</style>
Use this PageManager.ValueWhenBlankMode:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
   <asp:ListItem Selected="True">RemoveBoth</asp:ListItem>
   <asp:ListItem>RemoveText</asp:ListItem>
   <asp:ListItem>RetainBoth</asp:ListItem>
</asp:DropDownList><br/>
<br/>
<des:PageManager ID="PageManager1" runat="server" />
Textual watermark:<br/>
<des:TextBox ID="TextBox1" runat="server" ValueWhenBlank="Fill this in" /><br/><br/>
Style sheet when blank:<br/>
<des:TextBox ID="TextBox2" runat="server" ValueWhenBlankCssClass="BlankText" /><br/><br/>
Both text and style sheet:<br/>
<des:TextBox ID="TextBox3" runat="server" ValueWhenBlank="Fill this in" ValueWhenBlankCssClass="BlankText" /><br/><br/>

Return to the menu Select another DES Module