よくある文字数のカウントダウン。有名になったのは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!
とはならず・・・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+'文字'); });
これで項目がいくつあっても、同じように文字数をセットできるはずですね。
厳密にはエラー処理など細かい部分は省略しているので、そのあたりは適宜実装して下さい。