Hatena::ブログ(Diary)

いとうまさしのカチャカチャTODAY

2010-01-25

Twitterのつぶやきフォームのように入力文字数を動的にカウントする

| 19:49

今、Twitterライクなつぶやきサービスを作っています。

フォームのところでTwitterみたいに文字数のカウンターをつけたい、

ということでズバリなPluginを教えてもらいました。

jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields

http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas


(0)ダウンロード

上記のURLにアクセスして、メイン画像の下の「Download plugin」をクリック。

zip解凍して jquery.js と charCount.jsブラウザがアクセスできる場所に置きます。


(1)HTML

jsをインクルードします。

<script src="/javascripts/jquery.js?1249635503" type="text/javascript"></script>
<script src="/javascripts/charCount.js?1264415357" type="text/javascript"></script>

HTMLにカウンター用のタグを書きます。

<span class="counter"> 

(2)カウンター起動のスクリプトを書く

script type="text/javascript">
//
  $(document).ready(function(){$("#テキストエリアのid").charCount();})
//>
</script>

(3)CSSの編集

form .counter{
	font-size:20px;
	font-weight:bold;
	color:#ccc;
	}
form .warning{color:#600;}
form .exceeded{color:#e00;}

細かく設定することもできるみたいですが、以上の手順でそれなりに動きます。

Thank you Mr. Alen!

http://twitter.com/cssglobe