やるしかなっちゃん

やるしかない!

jQuery: inputやtextareaの文字数カウントの方法

そりゃあ僕だって最新のフレームワークを使ってもっとスマートにやりたい
でも男にはjQueryでやらなければいけない時がある

最初にコードを載せる

これはHTML
<textarea id="textarea" cols="30" rows="10"></textarea>
<p id="text"></p>
<p id="length"></p>


ここからJavaScript
$(function() {
  $('#textarea').bind('keydown keyup keypress change', function() {
    var text   = $(this).val();
    var length = text.length
    $('#text').text(text);
    $('#length').text(length);
  });
});

jsfiddle.net

簡単だけどこれが意外に一から書き始めるとアレ?ってなる

一応自分用に解説するとtextareaとかの入力欄の要素にkeydownとかkeyupとかのイベントをバインドしてやればいい
値は$(this).val()で取れるので後はお好きなように