skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

フォームの入力文字数をチェックするJavaScript「Maxlength Plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

フォームで文字数を制限することがよくあると思います。
Maxlength PluginではJavaScriptライブラリjQueryを利用し、文字数制限を実現します。

使用方法
Maxlength Pluginから、jquery.maxlength.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maxlength.js"></script>
<script type="text/javascript">
$(function () {
$('.limited').maxlength({
'feedback' : '.charsLeft' //残り数を表示する場所
});
});
</script>

上記を記述し、制限したい場所を以下のようにします。
<form action="">
<p>残り: <span class="charsLeft"></span>文字</p>
<textarea maxlength="制限文字数" class="limited"></textarea>
</form>

以上で完成です。
フォームの入力文字数をチェックするJavaScript「Maxlength Plugin」サンプル

記事作成：2009年01月19日

前の記事：インライン型LightBoxを実現するJavaScript「jQuery.popeye」
次の記事：画像を切り替えるJavaScript「jQuery Slinky Slider」