WEBを駆使した売上UP/トータルサポートを提供　
株式会社パルムゲート

このところフォーム関連の仕事をしていて、入力文字数制限がある場合のチェック方法を検討してみた。

通常は CakePHP のバリデーション利用するので、フォームからサブミットして初めてバリデーションがかかる。これは入力項目が少ない場合はまだ良いが、10も20も入力項目がある場合はまとめてエラー通知されるよりは入力しているその場で判明する方が良いだろう。

そういうインターフェイスを持つフォームも多いのでネット検索していたら BlackFlag さんのサイトでサンプルを見つけた。

基本的には、テキスト入力ボックスとテキストエリアに対し keyup / keydown / keypress / change の各イベントをトリガーにして入力フィールドの文字数を取得し判断する方法だ。

ただし文字数の上限はフィールドごとに変更できるようにしたいので、文字数上限はクラス名として countdownNNN (NNN は1桁以上の整数) を渡すことで実行時に判断させるように修正してみた。

出来上がった jQuery コードは以下の通り。

	$("input[type='text'][class*=countdown], textarea[class*=countdown]").bind('keydown keyup keypress change', function (){
		var classes = $(this).attr('class').match(/countdown([0-9]+)/);
		var countMax = RegExp.$1;
		var thisValueLength = $(this).attr('value').length;
		var availableChars = countMax-thisValueLength;
		if ( $(this).siblings('span.counter').length == 0 )
		{
			$(this).after('  ');	// カウンタ表示領域が用意されていなければ追加する
		}
		$(this).siblings('span.counter').text('(残り '+availableChars+' 文字)');
		if ( availableChars <= 0 )
		{
			$(this).siblings('span.counter').css('color', '#c00000');	// カウンタが負数の場合は赤字表示
			$(this).addClass('form-error');
		}
		else
		{
			$(this).siblings('span.counter').css('color', '');
			if ( $(this).siblings('div.error_msg').length == 0 )
			{
				$(this).removeClass('form-error');
			}
		}
	}).keydown();

このコードを実装したフォームでテキスト入力要素の class 指定に countdown16  とか countdown500  のようにすることで、前者は16文字までのカウントダウン、後者は500文字までのカウントダウンが表示される。コード末尾の .keydown() は、フォームロード時に各入力欄の残り文字数を初期表示させるために付け加えてある。これを省略した場合は、入力欄に入力するまでは残り文字数は表示されない。

カウントダウンエリアは用意されていなければ当該入力フィールドの直後に class="counter" を指定された span 要素 として挿入される。ただし、当該入力フィールドの兄弟位置に class="counter"  を持つ要素があればそこに表示する。

なお、クラス文字列から countdownNNN というパターンの検出はあまり厳密ではないので他のクラスと衝突するかもしれないので注意。