入力される内容に一定以上の文字数が必要な場合
入力フォームを作成した際、項目によっては「少なくとも○文字以上は入力して欲しい」という「最低入力文字数」を設定したいことがあります。 例えば、
- 「パスワード入力欄」で最低6文字の入力が必要な場合
- 「郵便番号入力欄」で7桁の入力が必要な場合
- 「ID入力欄」で最低8文字の入力が必要な場合
- 「電話番号入力欄」で最低10桁の入力が必要な場合
……などです。
そのような場合、入力欄のすぐ近くに「あと何文字の入力が不足しているのか」を常に表示しておくと、入力ミスを多少は減らせるでしょう。 また、自分で「何文字入力したのか」を数える必要がなくなるため、入力を楽にできます。
以下の入力フォームに、何か文字を入力してみて下さい。キーで入力するたびに、入力欄の右側に不足文字数の案内が表示されます。
※JavaScriptが有効な環境でないと表示されません。
■パスワード（6文字以上）： （入力して下さい）
■希望ID（8文字以上）： （入力して下さい）
ハイフンを除いて、一定以上の文字数が必要な場合
上記の例では、すべての入力文字をカウントして「不足文字数」を表示しています。 しかし、郵便番号や電話番号など、「-」（ハイフン）記号を除いてカウントしたい場合もあります。 その際、「ハイフンは入力しないで下さい」と掲載しておくのは不親切です。ハイフンを除いてカウントするのが望ましいでしょう。
以下のフォームにも何か文字を入力してみて下さい。先ほどの例と同様に、右側に不足文字数などが表示されます。 しかし、「-」（ハイフン）記号を入力した場合は、文字数にはカウントされません。
※JavaScriptが有効な環境でないと表示されません。
郵便番号（7桁）： （入力して下さい）
※「-」（ハイフン）記号は、あってもなくても構いません。
電話番号（10桁以上）： （入力して下さい）
※「-」（ハイフン）記号は、あってもなくても構いません。
上記の「郵便番号」欄の場合、「150-0」（5文字）と入力しても「1500」（4文字）と入力しても、どちらの場合も「3文字足りません」と表示されます。 これは、「-」記号を除外してカウントしているからです。
※入力文字種のチェックはしていないので、「ABC-DEFG」などと入力しても「OK！」と表示されます。 ここでは「文字数の不足を防ぐための表示」を行う例示が目的なので、文字種まではチェックしていません。（このサンプルでは半角文字の「-」だけを除外しています。）
今回は、上記の例のように、「フォームに入力される内容に一定以上の文字数が必要な場合」に、不足している文字数をリアルタイムに案内（表示）する方法をご紹介いたします。
数行のスクリプトを書くだけで簡単に実現できます。
