選択された項目によって、カウントしたい入力文字数を変える

よくある文字数のカウントダウン。有名になったのはTwitterかな。140文字以内で入力しないといけなかったので。

で、Javascript+jQueryで単純に考えると、

<input type="text" name="comment" value=""> <strong></strong>

<script>
	$('input[type=text]').keyup(function(){
		// 制限文字数
		var limit = 140
		// 現在の文字を取得
		var str = $(this).val();
		// 残り文字数を計算
		var diff = limit - str.length;
		// 表示
		$(this).next().text("残り"+diff +"文字");
	});
</script>

となりますね。

しかし、今回、select要素によって選択された項目毎に入力文字数が異なる場合です。

例えば以下のようなフォームがあったとします。

inputform

前のプルダウンで選択された項目がAだったら100文字、Bだったら200文字で制限をかけたいという場合。

カウント部分は上のものをある程度流用するとして、選択されたら制限文字数を変えないといけません。
しかも変更しやすくするために、select要素は以下のようにします。

<select name="type">
	<option value="A" data-limit="100">A</option>
	<option value="B" data-limit="200">B</option>
</select>

HTML5で使用可能なdata属性を利用して制限文字数をセットしておきます。
そして、そこが変更されたらinput要素に制限文字数をセットしなければならないので、

$('select[name=type]').change(function(){
	var limit= $('option:selected', this).data('limit');
	$(this).next().attr('data-limit', limit)
		.next().text('残り'+limit+'文字');
});

select属性が変更(change)されたら、選択されているoptionのdata属性から値を取得します。(2行目)
その値を、select要素の次の(next())要素であるinput要素に、属性値「data-limit=”文字数”」としてセットします。
さらに、その次の(next())要素であるstrong要素に「残り○文字」のテキストを流し込みます。(text())

こういう時ってメソッドチェーンって便利ですね。(next().attr().next().text())
長くなりすぎるとわかりづらいので、一度改行していますが。
あと、今回は取得した値で計算などを行わないためparseInt()を省略しています。

これで、input要素にはdata-limit属性が追加されたので、あとはそのdata-limit属性の値を、一番最初の制限文字数としてセットできるようにして、

$('input[type=text]').keyup(function(){
	var limit = $(this).data('limit');
	var str = $(this).val();
	var diff = limit - str.length;
	$(this).next().text("残り"+diff +"文字");
});

これでOK!

 

 

とはならず・・・w
上記のようなkeyupイベント等は、DOM要素が作られた時の情報でしか取得出来ません。
そもそもdata-limit属性は、DOMが構築されて、ページがロードされた後で動的にセットされた値になるので、そのような値はchange()やkeyup()イベントでは取得出来ません。
動的な情報も扱えるようにするためには、「on()」メソッドを使用します。

$(document).on('keyup', 'input[type=text]', function(){
	var limit = parseInt($(this).data('limit'));
	var str = $(this).val();
	var diff = limit - str.length;
	$(this).next().text('残り'+diff+'文字');
});

これで項目がいくつあっても、同じように文字数をセットできるはずですね。

厳密にはエラー処理など細かい部分は省略しているので、そのあたりは適宜実装して下さい。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

投稿ナビゲーション