入力フォームで何文字入力できるのかいつも聞かれるので作ってみました。 よく、Twitterアプリなんかででてくるあの表示です。
このスクリプトは JQuery 1.7 以上を必要とします。 一応、IE6/7/8/9, Safari5/6, Chrome20/21 で試しています。
以下に用意しました。
http://cafelounge.net/dev/?jquery-inputcount
前提として、以下を組み込みます。
<link type="text/css" rel="stylesheet" href="jquery.inputcount.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.inputcount.js"></script>
input タグに maxlength 属性を追加します。
<input type="text" name="username" maxlength="30" />
<input type="password" name="password" maxlength="30" />
<textarea name="commenct" maxlength="400" rows="8" />
あとは、どこかのタイミングで入力タグに対して以下を呼び出してください。
$(function(){
if ($.fn.textcount) {
$('textarea, input[type="text"], input[type="password"]').textcount();
}
});
これだけです。
$ cd path/to/css
$ wget https://raw.github.com/miko2u/jquery-inputcount/master/jquery.inputcount.css
$ cd path/to/js
$ wget https://raw.github.com/miko2u/jquery-inputcount/master/jquery.inputcount.js
path/to/js
および path/to/css
は、あなたが配置したいディレクトリにおいてください。