フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

jQueryでHeaderを共通化したプログラム日記

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

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化する前に済ませておかないと、体裁が崩れちゃうことくらい。

[紹介元] jQueryタグが付けられた新着投稿 – Qiita jQueryでHeaderを共通化したプログラム日記

コメント

記事に戻る

コメントを残す