フォームの入力文字数をチェックする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サンプルページ一覧

skuare.net