何文字不足しているのかを表示するスクリプト
必要なJavaScriptは、以下の18行です。このままHTMLに記述して下さい。
太字の部分は、画面に表示される文字や、その文字色です。好みに応じて自由に書き換えて下さい。（何も書き換えずに、そのままコピーして使っても構いません。）
<script type="text/javascript"><!--
function InputCharCheck( minnum, target, report ) {
var diff = minnum - document.getElementById(target).value.length;
var reps, repc;
if( diff > 0 ) {
// 足りない場合
reps = "（あと " + diff + " 文字足りません）";
repc = "red";
}
else {
// 足りた場合
reps = "OK！";
repc = "blue";
}
document.getElementById(report).innerHTML = reps;
document.getElementById(report).style.color = repc;
}
// --></script>
上記スクリプトの記述内容の解説は後に回します。（最後のページで紹介しています。）
何文字不足しているのかを表示するHTMLソース
上記のスクリプトを呼び出す入力フォームは、以下のようにHTMLを記述して作ります。
<p> ■パスワード（6文字以上）： <input type="password" size="21" value="" id="sample1" onkeyup="InputCharCheck(6,'sample1','report1');"> <span id="report1">（入力して下さい）</span> </p>
上記のHTMLソースと先ほどのJavaScriptを表示させると、以下のように見えます。
■パスワード（6文字以上）： （入力して下さい）
上記のHTMLソースの説明は以下の通りです。
●input要素：
input要素で入力欄を作っています。type属性に値「password」を指定しているので、パスワード入力欄になります。 値を「text」にすれば通常の入力欄になります。size属性は横幅の広さを表しています。
●input要素のid属性：
input要素には、id属性で値「sample1」を指定しています。この値はスクリプトから利用します。何でも好きな文字列に変えて下さい。 同一ページ内に複数の入力欄を作る場合は、他のid属性値と重複しないように指定して下さい。
●span要素：
span要素で、不足文字数の案内を表示する領域を作っています。最初は「（入力して下さい）」とだけ表示しています。
●span要素のid属性：
span要素には、id属性で値「report1」を指定しています。この値を使って、スクリプトから表示内容を書き換えています。 属性値は何でも好きな文字列に変えて下さい。同一ページ内に複数の入力欄を作る場合は、他のid属性値と重複しないように指定して下さい。
●input要素のonkeyup属性：
ここからJavaScriptを呼び出しています。「onkeyup」は、「キーが（押し下げられた後に）離された時点」でスクリプトを実行させるための属性（イベントハンドラ）です。
※onkeypressやonkeydownでは、（入力の直前に文字数をカウントしてしまい）うまくいきません。
●input要素のonkeyup属性の値（スクリプトの呼び出し内容）：
ここでは「 InputCharCheck(6,'sample1','report1'); 」と記述しています。これは、このページの冒頭で作成したスクリプトを呼び出す記述です。
記述内容の意味は、以下の通りです。
InputCharCheck( 文字数 , '入力欄のid名' , '表示領域のid名' );
- 文字数：
→ 「6文字以上」の入力を求めているので、「 6 」を記述します。 - 入力欄のid名：
→ 入力文字数のカウント対象にする入力欄は「 id="sample1" 」と記述したinput要素なので、「 'sample1' 」と記述します。 - 表示領域のid名：
→ 不足文字数の表示領域は「 id="report1" 」と記述したspan要素なので、「 'report1' 」と記述します。
※各id名は、引用符（シングルクオーテーション「 ' 」）で囲むのを忘れないようにして下さい。
※最初の数値（文字数）には引用符は不要です。
HTMLソースの説明は、以上です。
次に、「ハイフンを除外してカウントする」入力フォームのソースをご紹介いたします。
