ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

入力文字数が足りない場合に、その場で注意(4ページ目)

入力欄によっては、「最低○文字は入力してほしい」という『最低入力文字数』を指定したいことがあります。入力欄の隣に『現在不足している文字数』をリアルタイムに表示して、入力ミスを減らす方法をご紹介!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

ハイフンを除外する場合も、除外しない場合も、必要な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文字以上): (入力して下さい)

おわりに

今回は、「フォームに入力される内容に一定以上の文字数が必要な場合」に、不足している文字数をリアルタイムに案内(表示)する方法をご紹介いたしました。
最低入力文字数がある入力欄を作る際には、ぜひご活用下さい。

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます