Twitterライクに、あと何文字?を表現するJavaScript

Twitterの右上には入力できる数字が表示されています。
これと同じようなものをjQueryのプラグイン「jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields | Css Globe」を利用して導入します。
Twitterライクに、あと何文字?を表現するJavaScriptサンプル

使用方法
jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields | Css Globeからファイルをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="charCount.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#id名").charCount();
});
</script>

あとはinputあるいはtextareaに上記idを付与すれば完成です。
<form id="form" method="post" action="">
<div>
<textarea id="id名" ></textarea>
</div>
</form>

よりTwitterライクにするため、CSSを記述します。
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{position:absolute;right:0;top:-3px;font-size:20px;font-weight:bold;color:#ccc;}

また、文字数の変更や、ワーニング表示も可能です。
<script type="text/javascript">
$(document).ready(function(){
$("#id名").charCount({
allowed: 50, //最大文字数
warning: 20, //20文字になったらワーニング表示
counterText: '残り: ' //警告文言
});
});
</script>

Twitterライクに、あと何文字?を表現するJavaScriptサンプル

sponsors

「Twitterライクに、あと何文字?を表現するJavaScript」をシェアする

記事作成:
記事URL:

TOP > > > Twitterライクに、あと何文字?を表現するJavaScript