文字カウンタの追加
ユーザーが何文字入力したかを知ることができる文字カウンタ、またはそのテキスト領域の入力文字数が残り何文字かを知ることができる文字カウンタを追加できます。
- 次のように、span タグを Widget の textarea タグの後に追加して、一意の ID をタグに割り当てます。
<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>新しいタグは空のままにしておきます。 後でユーザーがテキストを入力したときに、Spry によりタグのコンテンツが提供されます。
注意： カウンタタグは、Widget の HTML コンテナタグ内に配置する必要があります。 - 次のように、counterType オプションと値を Widget コンストラクタに追加します。
<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>counterType オプションでは、使用するカウンタのタイプを定義します。指定できる値は、"chars_count" または "chars_remaining" の 2 つです。 "chars_count" 値を指定すると、カウンタはテキスト領域に入力された文字数をカウントします。 "chars_remaining" 値を指定すると、カウンタは最大文字数が入力されるまでの残りの文字数を表示します。 2 番目のオプションは、上の例のように、maxChars オプションと共に使用する必要があります。 詳細については、最小および最大文字数の指定を参照してください。
- 次のように、counterId オプションを Widget コンストラクタに追加して、カウンタ span タグに割り当てた一意の ID と同じ値を設定します。
<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>