DEVELOPERS BLOGデベロッパーズブログ

  1. HOME > 
  2. 加藤 正人のデベロッパーズブログ > 
  3. JavaScript で入力フィールドの文字カウンタを実装してみる

加藤 正人のデベロッパーズブログ

加藤 正人

氏名
加藤 正人
役職
多分SE
血液型
秘密
出没
美味しいもののあるところ
特色
タヒチ大好き。ちょいメタボ。

加藤 正人

2013/02/23

JavaScript で入力フィールドの文字カウンタを実装してみる

 

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

通常は 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 というパターンの検出はあまり厳密ではないので他のクラスと衝突するかもしれないので注意。

関連タグ: JavaScript  jQuery 

関連エントリー