Character Limitは、フォーム要素に文字制限を設定するためのjQueryプラグインです。本プラグインは非常に軽量です。フォームをWEB上で公開する場合、ユーザーがフリーでテキスト入力を行う場面が多々必要となります。入力文字は少ないですが、名前もフリー入力のひとつです。
一方、問い合わせや要望などの文章を入力する場合には、長文の入力になる可能性があります。そんな時に本プラグインを使用すれば、ユーザーのテキスト入力文字数を制限することができます。そして、ユーザーも何文字入力したのかをリアルタイムで確認することができます。
それでは、Character Limitについて詳しく見ていきましょう。
Character Limit
Character Limitのダウンロードや詳細は以下からどうぞ。実際のデモはファイルをダウンロードして確認できます。
Character Limit
冒頭で、ユーザーがリアルタイムで入力文字数を確認できると述べましたが、Character Limitの基本的な仕様として正確に言い換えると、「あと何文字入力ができるか」を確認しながら入力できるものとなっています。例えば、200文字を最大入力数とすると、入力する度に199.198.197.196….とカウンターが減っていきます。
実装については2段階の方法となります。ステップ１はHTMLのマークアップです。具体的なマークアップは下記になります。
<div class="text-limiter">
<textarea class="form-control" id="address" placeholder="Enter your address" rows="5" data-maxchar="200"></textarea>
<span class="pull-right">
<em>max. character allowed are</em>
<em class="character-counter"></em>
</span>
</div>
［id=”address”］idは任意のもので構いません。この場合は住所を入力するエリアと示唆しています。
［data-maxchar=”200″］は、［最大入力文字数は200文字］を意味しています。
ステップ２、プラグインをサイトへ読み込みます。下記は、オプションありの場合です。オプションは最大入力の文字数のカウンターを表示したい場合に設定してください。
var options = {
counter: 'some-class-to-add'
};
$('FORM_ELEMENT_01, FORM_ELEMENT_02').characterlimit(options);
「オプションなし」の場合は、下記になります。
$('FORM_ELEMENT_01, FORM_ELEMENT_02').characterlimit();
以上です。非常にシンプルですね。CSSなどで、お好みのデザインを追加しても良いでしょう。
