テキストボックスに入力した文字数をリアルタイムに表示するアレ #jQuery

テキストボックスに入力されてる文字数をリアルタイムに計算して表示するアレ

HTMLの方はこんな感じ

<style>
.length_counter {
  display: block;
  text-align: right;
}
</style>
.
.
.
<body>
  <input type="text" id="text_box" maxlength="20" class="countable">
  <label for="text_box" class="length_counter">
</body>

JSの方はこんな感じ

$(function () {
  // 画面を表示したときにテキストボックスのサイズと合わせてから、[入力されてる文字数] / [最大文字数] を表示
  $('.length_counter').each(function () {
    var obj = $('#' + $(this).attr('for'));
    $(this).css({
      'width' : obj.css('width')
    });
    $(this).html(obj.val().length + ' / ' + obj.attr('maxlength'));
  });

  // 入力イベントを拾ってラベルを更新
  $('.countable').bind('keydown keyup keypress change', function () {
    var maxLength = $(this).attr('maxlength');
    var valLength = $(this).val().length;
    $('[for="' + $(this).attr('id') + '"]').html(valLength + ' / ' + maxLength);
  });
});

ひとまず分かっているのは、jQuery UIのAccordionで折り畳まれた要素に対しては、width属性が上手く取得できないことがあるので、ラベルへの初期値の表示はAccordion化する前に済ませておかないと、体裁が崩れちゃうことくらい。