堀北真希うさぎ
主な作品
人気女優をモデルにした制作者のオリジナルキャラクタを用いたイラストの一例とアニメーション動画

ページ案内▼

フォームの入力文字数をチェックするスクリプト。

入力フォームには、文字数に制限を課している場合があります。

指定の文字数を越えた入力は事前検査でエラーとすべきでしょう。

そうする事で、サーヴァに余計な負荷を与えないだけでなく、エラーメッセージを受取るために待たされると言うような事を無くす事が出来るようになります。

フォームの入力文字数をチェックするスクリプト・目次。

おことわり。

フォームの必須入力欄の入力を確認するスクリプトのサンプル。

以下のフォームは、95文字以内のメッセージを受付けます。

予め、いろは48文字を入力しておりますので(全角文字なので96文字相当)、そのまま送信ボタンを押すと、エラーダイアログが開く筈です。

また、文字を一字減らしてみると、エラーが出なくなる事が分かります。これは一字減らすと47文字となり、94文字相当となって文字数制限を下廻るからです。

メッセージ入力

メッセージを95文字以内で入力して下さい。

メッセージ

フォームの入力文字数をチェックするスクリプトのソースとHTML文書での記述。

フォームの入力文字数をチェックするスクリプト「CheckFilledBytes.js」は以下のようになっております。

limit_text=95;    // 字数制限。

function checkFilledBytes() {
    var t=document.forms[0].text.value;
    var l=t.length;
    var c='';
    var han='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&\'()=~|\\,./;:@[]<>?_+*}`{\n\t ';

    // 全角文字も１文字扱いする環境では、全角文字を見出す度に文字数を増やす。
    if ("あ".length==1) {
        while (t!='') {
            c=t.substring(0,1).toUpperCase();
            t=t.substring(1,t.length);
            if (han.indexOf(c)<0) { ++l; }
            }
        }

    // 字数が上限を越えているならエラーとする。
    if (l>limit_text) {
        window.alert('文字数が長過ぎます！ '+limit_text+'文字(全角は二文字扱い)以内で入力して下さい！');
        return(false);
        }
    return(true);
}

一方、HTML文書側には、以下のように記述されております。

<form action=" (略) " method="post" onsubmit="return(checkFilledBytes());">
    <fieldset>
        <legend>メッセージ入力</legend>
        <p>メッセージを95文字以内で入力して下さい。</p>
        <ul>
            <li>全角文字・半角カナ文字は二文字分となります。</li>
            </ul>
        <dl>
            <dt>メッセージ</dt>
            <dd><textarea name="text" rows="2" cols="30">いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん</textarea></dd>
            </dl>
        <ul>
            <li><input type="submit" value="送信" /></li>
            </ul>
        </fieldset>
    </form>

スクリプトの構成。(平成17年 8月21日 更新)

スクリプトの起動。(平成17年 8月21日 修正)

スクリプトはフォームの送信ボタンが押された時に起動します。

これは、<form>要素のonsubmit属性で実現します。

onsubmit属性は、当該<form>要素の送信手続きをイヴェントとして行なうイヴェントハンドラで、この属性値となるJAVAスクリプトが実行されます。

ここでは、CheckFilledBytes()函数を実行した結果をreturn文で返すというだけですが、その際にエラーを見出した場合はfalse値を返して送信をやめさせます。

スクリプトの処理。

スクリプトの処理は、メッセージ欄に入力された文字列を数えて、それが予め設定してあるバイト数を越えている場合にエラーダイアログを出すと言うものです。

ですから、処理自体は単純ですが、実際にはブラウザの実装の問題があります。

ブラウザの実装の問題。

JAVAスクリプトの標準規格では、全角文字も１文字と見做す事になっております。

全角も一文字扱いとなると、正しい文字バイト数で数える事が出来なくなってしまいます。

このため、全角を一文字扱いする環境では、文字列中に全角文字を見出す度に文字数を１づつ増やしていく措置が必要になります。

文字数カウント処理の実際。

文字数をカウントする処理は以下の部分です。

    var t=document.forms[0].text.value;
    var l=t.length;
    var c='';
    var han='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&\'()=~|\\,./;:@[]<>?_+*}`{\n\t ';

    // 全角文字も１文字扱いする環境では、全角文字を見出す度に文字数を増やす。
    if ("あ".length==1) {
        while (t!='') {
            c=t.substring(0,1).toUpperCase();
            t=t.substring(1,t.length);
            if (han.indexOf(c)<0) { ++l; }
            }
        }

予め、フォームの<textarea name="text">要素の内容をvalueプロパティで取得して変数 t に代入し、さらにその字数をlengthプロパティで取得して変数 l に代入します。

変数 c は文字数カウント処理で使われるもので、変数 han には半角扱いする文字を並べております。

全角文字「あ」に対してlengthプロパティを当てる事で、全角文字の扱いが分かります。

全角文字を一文字扱いにする場合はこのプロパティ値は1になります。

この場合、文字列を頭から順番に一文字づつ切出して行き、切出した一文字が半角文字リストに含まれているかどうかを判定します。

判定した結果、半角文字でない場合は文字数に1を加算する事になります。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com