【ホームページ作成】入力フォームが空のときに入力案内を表示

form

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

入力フォームが空のときに入力案内を表示

入力フォーム内に何も入力されていないときには「検索語を入力」などの入力案内文字を表示させ、入力欄にカーソルが入ったら案内文字が消えるようにしてみましょう。用途が分かりやすい入力欄になるかもしれません。

執筆者：西村文宏

更新日：2007年11月02日

この記事の担当ガイド

西村文宏

※ここからは、JavaScriptの具体的な記述内容を紹介します。少しずつ解説しながら進めていますが、最後のソースをコピー＆ペーストするだけでも使えますので、解説は読み飛ばしても問題ありません。

案内文字の表示・非表示を切り替える

それでは、入力欄にカーソルが入ったときに案内文字を消し、カーソルが出たときに案内文字を表示させるようJavaScriptを記述しましょう。
前ページで記述したJavaScript部分に、以下のように追記します。

<script type="text/javascript">

   var GuideSentence = 'お問い合わせ番号';

   function ShowFormGuide(obj) {

      // 入力案内を表示

 	      if( obj.value == '' ) {

         obj.value = GuideSentence;

      }

 	   }

   function HideFormGuide(obj) {

      // 入力案内を消す

 	      if( obj.value == GuideSentence ) {

         obj.value='';

      }

 	   }

</script>

上記のソースを加えて表示させると、以下のように見えます。入力欄にカーソルを入れたり出したりすると、表示も変化します。

※まだ、色を変化させる記述を加えていないので、文字色は常に灰色です。ユーザが入力する文字の色も灰色のままです。色の変更は次のページで記述します。

上記ソースの解説

ソースの解説は飛ばして、次の記述内容を読む >>

■2行目「var GuideSentence = 'お問い合わせ番号';」

最初に、「GuideSentence」という変数を作って案内文字を格納しています。上記では、案内文字は「お問い合わせ番号」という文字列です。この記述は実際に使いたい内容に変更して下さい。
ここで記述する案内文字は、入力欄の初期状態の文字列（＝input要素のvalue属性の値）とまったく同一でなければなりませんので注意して下さい。異なっていると、望み通りの動作になりません。

なお、もし1ページ内に複数種類の案内文字を用意する場合は、このソースをそのまま複数個コピーするのではうまく動きません。「GuideSentence」という変数名をそれぞれ異なるものにするか、もしくはこの記事の最後でご紹介する「複数版のソース」を使って下さい。

■5行目「if( obj.value == '' ) 」
■6行目「obj.value = GuideSentence;」

「obj.value」は、入力欄に入力されている文字列を表しています。
5行目で、この中身が空かどうかを判定し、空だったら、6行目が実行されます。 6行目では、入力欄内に案内文字を入力させています。
つまり、この5～6行目は、「入力欄が空だったら、案内文字を表示する」という意味になります。

■11行目「if( obj.value == GuideSentence )」
■12行目「obj.value='';」

11行目は、入力欄に入力されている文字列が案内文字と同一かどうかを判定しています。同一であれば、12行目が実行されます。 12行目では、入力欄を空にしています。
つまり、この11～12行目は、「入力欄に入力されている文字列が案内文字だったら、入力内容を消す」という意味になります。

最後に、ユーザが入力する際には文字を黒色にしましょう >>