ホームページ作成

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

フォームの活用・装飾 (HTML,CSS,JavaScript)

更新日：2007年11月02日

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

西村文宏

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

テキスト入力欄に案内文字を表示するソースのまとめ「複数版」

1ページ内に複数個の入力欄を用意して、それぞれに別々の案内文字を表示させたい場合は、以下の複数版のソースをご活用下さい。
※1ページ内に複数個の入力欄があっても、案内文字が同じで構わないなら、前ページのソースが利用可能です。

■JavaScript部分

<script type="text/javascript">

   function ShowFormGuide(obj,GuideSentence) {

      // 入力案内を表示

      if( obj.value == '' ) {

         obj.value = GuideSentence;

         obj.style.color = '#808080';

      }

   }

   function HideFormGuide(obj,GuideSentence) {

      // 入力案内を消す

      if( obj.value == GuideSentence ) {

         obj.value='';

         obj.style.color = '#000000';

      }

   }

</script>

■HTML・スタイルシート部分

<input type="text" value="整理券番号" style="color: #808080; width: 150px;" onFocus="HideFormGuide(this,'整理券番号');" onBlur="ShowFormGuide(this,'整理券番号');">

<input type="text" value="担当者氏名" style="color: #808080; width: 150px;" onFocus="HideFormGuide(this,'担当者氏名');" onBlur="ShowFormGuide(this,'担当者氏名');">

■記述上の注意点

この「複数版」ソースでは、JavaScript側には案内文字を書きません。その代わり、HTMLソース側に案内文字を3回記述する必要があります。3つともまったく同一のものにしないとうまく動きませんので注意して下さい。

JavaScript側に案内文字を書かない代わりに、JavaScript関数を呼び出すinput要素からスクリプトに対して案内文字を渡すように変更しています。これによって、1つのスクリプトで、複数種類の案内文字を扱うことができるようになります。

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

上記では2つしか入力欄を作っていませんが、input要素を増やすことで必要なだけ入力欄を作ることができます。JavaScriptソースは1つだけで構いません。

おわりに

今回は、テキスト入力欄が空のときに案内文字を表示させる「案内文字付きのテキスト入力欄」を作る方法をご紹介致しました。ぜひ、ご活用下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！