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

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

sponsors

使用方法

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>

サンプル

sponsors


Javascriptサンプルページ一覧
skuare.net