テキスト入力欄の内側に案内を画像で表示する

テキスト入力欄内に最初から薄い文字で案内が表示されていて、クリックしてカーソルを入れると案内文字が消えるフォームをよく見かけます。 例えば下図のようなフォームです。

サンプル:

このようなフォームの作り方は、記事「入力フォームが空のときに入力案内を表示」でご紹介いたしました。
今回は、テキストではなく画像を表示させる下記のようなフォームを作ってみましょう。

サンプル:

上記の入力フォーム内をクリックしてみて下さい。案内画像が消えるはずです。 何も入力しないままフォーム外をクリックすれば、案内画像が再表示されます。 何かを入力してからフォーム外をクリックした場合は、案内画像は消えたままです。

実現方法はとても簡単で、画像「案内用画像」を用意して、入力フォーム内に表示させているだけです。 JavaScriptを用いて入力内容を判断し、画像を消したり再表示したりしています。

前回の記事(2本)

※今回ご紹介する入力フォームの作り方は、以下の2つの記事でご紹介した内容をベースにしています。 重複する解説は本記事では省略しています。まだご覧になっていない場合は、先にこれらの記事をお読み頂くと、次ページでご紹介するソースが分かりやすくなると思います。

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

テキスト入力欄の内側にアイコンを表示する
無味乾燥なテキスト入力フォームの内側左端にアイコンを表示させてみましょう。検索用の入力欄なら虫眼鏡などの「検索機能」を示すアイコンを表示させることで、役割が分かりやすいテキスト入力フォームになります。

上記の内容を踏まえて、今回の「案内画像付きのテキスト入力欄」を作るソースを書いてみましょう。

それでは、実現するソースを書きましょう >>