Simplest Twitter-like dynamic character count for textareas and input fields
「Simplest Twitter-like dynamic character count」は、Twitterの入力フォームのテキストエリア脇に表示されるような、入力した文字をカウントしてくれるシンプルなjQueryプラグインです。
動作については、デモサイト が用意されているのでそちらを参照すればどのようなものかすぐにわかると思います。
ビジネスアプリでも入力フォームに文字制限をするというような仕様はよくありますが、このようにあと何文字入力可能かというのを表示しておけば、ユーザーにとって易しいインターフェースを提供できるかもしれません。
（カウントするのは文字数であってバイト数ではないので、その辺は注意が必要かもしれません）
Simplest Twitter-like dynamic character countの設置方法
まず、jQueryプラグインということでjQuer本体が必要です。
ただし、「Simplest Twitter-like dynamic character count」のソースをダウンロードするとjQueryもバンドルされているため、そちらを利用しても良いでしょう。
両方のソースをドキュメントルート以下の適当なディレクトリに保存しておきます。
利用方法は、簡単でテキストエリアにIDを指定し、そのIDに対してcharCount()メソッドを呼び出してあげるだけになります。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/charCount.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#your_message").charCount();
});
</script>
<style>
form{width:500px;}
textarea{
width:490px;
height:60px;
border:2px solid #ccc;
padding:3px;
color:#555;
font:16px Arial, Helvetica, sans-serif;
}
form div{position:relative;margin:1em 0;}
form .counter{
right:0;
top:0;
font-size:16px;
font-weight:bold;
color:#999999;
}
form .warning{color:#600;}
form .exceeded{color:#e00;}
</style>
</head>
<body>
<form id="form" method="post" action="">
<label for="message">いまどうしてる？</label>
<textarea id="your_message" name="your_message"></textarea>
<input type="submit" value="ツイート" />
</form>
</body>
CSSの部分はソースに含まれるサンプルのものを適用しています。
- Twitter風入力フォームの構築例
デフォルトだとTwitter同様に140文字から入力文字数をカウントダウンしていきます。
また、Twitter同様に140文字を超えると赤字でマイナス表記となったりします。
これらはカスタマイズ可能で、任意の文字数からカウントダウンさせたり、特定の文字数以下になると警告色に変えたりメッセージを表示させたりすることも可能です。
$("#your_message").charCount({
allowed: 50,
warning: 20,
counterText: '残りの入力文字数: '
});
上記のように、charCountメソッド内にオプションを指定していきます。
カウンターの文字や警告色についてもカスタマイズ可能です。
（サイト内にCSSのオプションが解説されていますので参照してみてください）
- カスタマイズした入力フォームの例
最初にも書きましたが、Twitter以外でもこのような入力フォームに文字カウントを用意することでわかりやすいインターフェースを提供できるので、結構用途は幅広いのではないかなと思います。
[PR]
[PR]
関連記事
APC+jQuery UIを使ってファイルアップロード時にプログレスバーを表示する
jQuery UI Sortableを使ってドラッグ＆ドロップでリストを並び替える
Googleサジェストが実装できるjQuery Autocomplete Mod
高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]
[jQuery] マウスオーバー・マウスアウトで画像を表示・非表示にする方法
[jQuery] 外部JavaScriptファイル読込みに関する考察
[JS] thickboxを活用して利用者に分かりやすいサイトを作ろう