Introduction to the 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 or WordCountValidator, because it does not enforce a limit. It merely communicates the count and if a limit is exceeded.

The user interface of the TextCounter can be like an interactive label control. It also can present itself in the Hint feature of DES TextBoxes.

Here are the key properties of the TextCounter control:

• TextBoxControlID – The ID to the TextBox control whose text will be evaluated. Alternatively, use TextCounterControl and assign a reference to the TextBox control programmatically.
• Minimum – The minimum number of characters or words required.
• Maximum – The maximum number of characters or words permitted. When unassigned, the TextCounter first looks for a Maximum property on TextLengthValidator or WordCountValidator assigned to the textbox. If not found, it looks at the MaxLength property on the TextBox (even if the textbox is MultiLine).
• Milestone1 – The number of characters or words before Maximum when Milestone1 is used. When Maximum minus Milestone1 is reached, Milestone1Message is displayed and the style sheet class "DES_TCCMilestone1" is applied. For example, when Maximum is 100 and you want the Milestone1 to occur at the 80th character, use 20 (100 – 80) in Milestone1.
• Milestone2 – The number of characters or words before Maximum when Milestone2 is used. When Maximum minus Milestone2 is reached, Milestone2Message is displayed and the style sheet class "DES_TCCMilestone2" is applied. For example, when Maximum is 100 and you want the Milestone2 to occur at the 90th character, use 10 (100 – 90) in Milestone2.
• CountType - Determines if it counts by characters or words.
• NoLimitMessage - The message when there is no maximum. If a maximum is used, NormalMessage and several others below are used.
• NormalMessage - The message when the count is between the Minimum and Maximum. If any milestones are used, it must be less than the milestone.
• Milestone1Message - The message when the count reaches Milestone1.
• Milestone2Message - The message when the count reaches Milestone2.
• AboveMaximumMessage - The message when the count exceeds Maximum.
• BelowMinimumMessage - The message when the count is below Minimum.
• DisplayMode – Determines where the messages are shown. It has these values:
  • Here - Use the location of the TextCounter. This is the default.
  • Hint - Use the textbox's Hint feature if it is set up. It will append its message to the Hint text. Because it appends, you may want some separator between the Hint and the textcounter’s message.
  • Both - Use both the TextCounter and Hint feature.
  When DisplayMode is Hint or Both, use the PageManager.HintManager.HintShowTextCounterSeparator to define the HTML that separates the hint text from the TextCounter message. It defaults to “<br />”. If you want the TextCounter message to appear first, use the token “{~}” as the first element of the PageManager.HintManager.HintShowTextCounterSeparator property.

The Message properties support the following tokens:

• "{MINIMUM}" – The value of the Minimum property.
• "{MAXIMUM}" – The value of the Maximum property.
• "{COUNT}" – The number of characters or words in the text.
• "{COUNT:singular:plural}" – Shows either the word in the “singular” position or “plural” position based on the count. Singular is shown if the count is 1.
• “{EXCEEDS}” - The number of characters or words exceeding the minimum or maximum.
• “{EXCEEDS:singular:plural}” uses the singular word when {EXCEEDS} is 1; otherwise it uses the plural word.

If you want to change the default style sheets, the styles are defined in the [web app]\DES\Appearance\Interactive Pages\TextCounter.css file.