4/4 入力文字数が足りない場合に、その場で注意 [ホームページ作成] All About

何文字不足しているのかを表示するスクリプトの解説

ハイフンを除外する場合も、除外しない場合も、必要なJavaScriptは18行です。（下記は、ハイフンを除外しない場合のソースです。）

<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>

このJavaScriptソースの意味を、かなり簡単に紹介すると、以下のような感じになります。

<script type="text/javascript"><!--
function InputCharCheck( 最低文字数, 入力欄id名, 表示領域id名 ) {
   <不足文字数> = [最低文字数] - [入力欄に入力されている文字数]
   if( <不足文字数>が0より大きい場合 ) {
      <表示内容> = 「（あと <不足文字数> 文字足りません）」
      <表示色>　 = 「red（赤色）」
   }
   else <不足文字数>が0以下の場合 {
      <表示内容> = 「OK！」
      <表示色>　 = 「blue（青色）」
   }
   [表示領域の中身を書き換え] = <表示内容>
   [表示領域の文字色を変更]　 = <表示色>
}
// --></script>

●入力欄に入力されている文字数
「 document.getElementById(target).value.length 」という記述で、入力欄に入力されている文字数が分かります。

●不足文字数
指定した「最低文字数」から、「入力欄に入力されている文字数」を引けば、不足文字数を計算できます。（変数diff）
「不足文字数」が0より大きければ、入力文字数が足りないということになります。
「不足文字数」が0以下なら、入力文字数は足りているということになります。（※0の場合はぴったり。マイナス値の場合は多い。）

●表示領域の中身を書き換え
「 document.getElementById(report).innerHTML = (文字列) 」という記述で、表示領域（ここではspan要素）に表示する内容を書き換えられます。

●表示領域の文字色を変更
「 document.getElementById(report).style.color = (色名) 」という記述で、表示領域（ここではspan要素）の文字色を変更できます。色名は red や blue などの英語名のほか、#ff0000 や #0080ff のような16進数での指定も可能です。

●入力欄に入力されている文字数（ハイフンを除外）
「document.getElementById(target).value.length」という記述を、
「document.getElementById(target).value.replace(/-/g,"").length」に変更すると、ハイフンを除いた文字数を計算できます。
「 replace(/-/g,"") 」は正規表現で、『「-」（ハイフン）記号を「""」（空）と置き換える』意味です。つまり、ハイフン記号だけを消すことになります。
その結果、ハイフンだけを除外した文字列の長さが得られます。

マウスで入力された場合にも計算できるようにする

今回ご紹介したHTMLソースでは、「onkeyup」属性（イベントハンドラ）を使ってスクリプトを呼び出しました。これだけだと、マウス操作だけで入力された場合には、不足文字数の表示が行われません。
そこで、onkeyup属性の値と同じ内容を、onblur属性にも書いておくと良いでしょう。

onblur属性（イベントハンドラ）に記述した内容は、入力欄からフォーカスが離れたとき（入力欄の外にカーソルが移動したときなど）に実行されます。

これなら、キー入力以外の方法で入力された場合でも、フォーカスが離れたときには必ず文字数のチェックが行われ、案内の表示が更新されます。

<p>
   ■希望ID（8文字以上）：
   <input type="text" size="21" value="" id="sample2" onkeyup="InputCharCheck(8,'sample2','report2');" onblur="InputCharCheck(8,'sample2','report2');">
   <span id="report2">（入力して下さい）</span>
</p>

上記のように、onkeyup属性に指定した内容と同一のものを、onblur属性にも記述しておきます。

■希望ID（8文字以上）：（入力して下さい）