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

ハイフンを除外して、
何文字不足しているのかを表示するスクリプト

必要なJavaScriptは、ほとんど先ほどと同じで以下の18行です。このままHTMLに記述して下さい。
太字の部分は、画面に表示される文字や、その文字色です。好みに応じて自由に書き換えて下さい。（何も書き換えずに、そのままコピーして使っても構いません。）

<script type="text/javascript"><!--
function InputCharCheckWithoutHyphen( minnum, target, report ) {
   var diff = minnum - document.getElementById(target).value.replace(/-/g,"").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>
   ハイフンを除いて7桁：
   <input type="text" size="21" value="" id="sample4" onkeyup="InputCharCheckWithoutHyphen(7,'sample4','report4');">
   <span id="report4">（入力して下さい）</span>
</p>

上記のHTMLソースと先ほどのJavaScriptを表示させると、以下のように見えます。

ハイフンを除いて7桁：（入力して下さい）

※このサンプルでは半角文字の「-」だけを除外しています。

前ページのHTMLソースと異なる点は、呼び出す関数名が「InputCharCheck」から「InputCharCheckWithoutHyphen」に変わったという点だけです。

●input要素のonkeyup属性の値（スクリプトの呼び出し内容）：
ここでは「 InputCharCheckWithoutHyphen(7,'sample4','report4'); 」と記述しています。これは、このページの冒頭で作成したスクリプトを呼び出す記述です。
記述内容の意味は、前ページの関数「InputCharCheck」の場合と同様で、以下の通りです。

InputCharCheckWithoutHyphen( 文字数 , '入力欄のid名' , '表示領域のid名' );

文字数：
→ 「7文字以上」の入力を求めているので、「 7 」を記述します。
入力欄のid名：
→ 入力文字数のカウント対象にする入力欄は「 id="sample4" 」と記述したinput要素なので、「 'sample4' 」と記述します。
表示領域のid名：
→ 不足文字数の表示領域は「 id="report4" 」と記述したspan要素なので、「 'report4' 」と記述します。

※各id名は、引用符（シングルクオーテーション「 ' 」）で囲むのを忘れないようにして下さい。
※最初の数値（文字数）には引用符は不要です。

最後に、このページと前ページでご紹介したJavaScriptソースの意味を簡単に解説致します。

不足文字数を案内するJavaScriptソースの解説へ >>