TextCounter Control
The TextCounter control displays the number of characters or words within a textbox.
It assists users when there are limits to the size of text they can enter. It compliments,
but does not replace the TextLengthValidator/WordCountValidator, because it does
not impose a limit. It merely communicates the count and if a limit is exceeded.
Here are its features:
- Evaluates the size of the text as compared to a maximum and possibly a minimum.
- Evaluates either the number of characters or the number of words.
- Its text and optionally style sheet changes as the text size changes:
- Below the minimum
- Between the minimum and the next milestone
- At or above a milestone prior to the maximum, such as 20 characters left
- At or above a second milestone prior to the maximum, such as 10 characters left,
to allow further emphasis that the user is reaching the maximum
- Above the maximum
See Demo 2.
- The text shown supports tokens that can be replaced by the current count, minimum,
maximum, and how much it exceeds the maximum.
- It can be shown on the page like a label and/or in the Interactive Hints feature.
When in a Hint, it is hidden except when focus is on the textbox. (See
Demo 3)
Demo 1 - Counting without limits
Character count:
ASP.NET Syntax for this demo
<P>
<asp:TextBox id="TextBox1" runat="server" Width="400px" TextMode="MultiLine"
Rows="5"></asp:TextBox>
</P><P>Character count:
<des:TextCounter id="TextCounter1" runat="server" TextBoxControlID="TextBox1"></des:TextCounter>
</P>
Demo 2: Counting with minimum and maximum limits
Limits used here are a minimum of 5 and maximum of 20. The limits are established
on the TextLengthValidator.
Character count:
ASP.NET Syntax for this demo
<p>
<asp:TextBox id="TextBox2" runat="server" Width="400px" TextMode="MultiLine"
Rows="5"></asp:TextBox>
<des:TextLengthValidator id="Textlengthvalidator2" runat="server"
ControlIDToEvaluate="TextBox2" Minimum="5" Maximum="20"
ErrorMessage="Exceeds the character limit of {MINIMUM} to
{MAXIMUM} by {EXCEEDS}." >
<ErrorFormatterContainer>
<des:TextErrorFormatter></des:TextErrorFormatter>
</ErrorFormatterContainer>
</des:TextLengthValidator></p>
<p>Character count:
<des:TextCounter id="TextCounter2" runat="server" TextBoxControlID="TextBox2"
Milestone2="5"></des:TextCounter></p>
Demo 3: TextCounter in a Hint
The DES Enhanced TextBox is used to provide the hint feature.
ASP.NET Syntax for this demo
<p>
<asp:TextBox id="TextBox2" runat="server" Width="400px" TextMode="MultiLine"
Rows="5"></asp:TextBox>
<des:TextLengthValidator id="Textlengthvalidator2" runat="server"
ControlIDToEvaluate="TextBox2" Minimum="5" Maximum="20"
ErrorMessage="Exceeds the character limit of {MINIMUM} to
{MAXIMUM} by {EXCEEDS}." >
<ErrorFormatterContainer>
<des:TextErrorFormatter></des:TextErrorFormatter>
</ErrorFormatterContainer>
</des:TextLengthValidator></p>
<p>Character count:
<des:TextCounter id="TextCounter2" runat="server" TextBoxControlID="TextBox2"
Milestone2="5"></des:TextCounter></p>
|