Add a character counter

You can add a character counter that lets your users know how many characters they have typed, or how many characters are remaining when entering text in the text area.

Add a span tag after the textarea tag for the widget, and assign a unique ID to the tag, as follows:

<form id="form1" name="form1" method="post" action="">
	<span id="sprytextarea1">
		<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
		<span id="my_counter_span"></span>
		<span class="textareaRequiredMsg">Maximum number of characters exceeded</span>
	</span>
</form>
<script type="text/javascript">
	var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1" {maxChars:100});
</script>

Leave the new tag empty. Spry provides the content of the tag later as the user types in text.

Note: The counter tag must appear within the HTML container tag for the widget.

Add the counterType option and a value to the widget constructor, as follows:
```
<form id="form1" name="form1" method="post" action="">
	<span id="sprytextarea1">
		<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
		<span id="my_counter_span"></span>
		<span class="textareaRequiredMsg">Maximum number of characters exceeded</span>
	</span>
</form>
<script type="text/javascript">
	var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1" {maxChars:100, counterType:"chars_remaining"});
</script>
```
The counterType option defines the type of counter to use and can take two values: "chars_count", or "chars_remaining". The "chars_count" value results in a counter that counts the number of characters typed in the text area. The "chars_remaining" value results in a counter that displays the number of characters remaining before the maximum number of characters is reached. The second option must be used in conjunction with the maxChars option, as in the preceding example. For more information, see Specify a minimum and maximum number of characters.

Add the counterId option to the widget constructor, and set its value equal to the unique idea you assigned to the counter span tag, as follows:

<form id="form1" name="form1" method="post" action="">
	<span id="sprytextarea1">
		<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
		<span id="my_counter_span"></span>
		<span class="textareaRequiredMsg">Maximum number of characters exceeded</span>
	</span>
</form>
<script type="text/javascript">
	var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1" {maxChars:100, counterType:"chars_remaining", counterId:"my_counter_span"});
</script>

Current page: http://livedocs.adobe.com/en_US/Spry/1.4/WS621B74CF-152D-443b-AD7C-F9073FBC9ED6.html

Spry

Add a character counter

Comments