よくある文字数のカウントダウン。有名になったのは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要素によって選択された項目毎に入力文字数が異なる場合です。
例えば以下のようなフォームがあったとします。
前のプルダウンで選択された項目が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！
とはならず・・・ｗ
上記のような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+'文字');
});
これで項目がいくつあっても、同じように文字数をセットできるはずですね。
厳密にはエラー処理など細かい部分は省略しているので、そのあたりは適宜実装して下さい。