テキスト入力欄に案内文字を表示 テキスト入力欄内に最初から薄い文字で案内が表示されていて、クリックしてカーソルを入れると案内文字が消えるフォームをよく見かけます。 例えば下図のようなフォームです。 このような「案内文字」を表示したり消したりする入力欄は、JavaScriptを活用すると簡単に作れます。 JavaScriptを使えば、入力欄内の文字と装飾(文字色)を自由に変更できるからです。 試しに作ってみた入力フォームを下記に掲載しています。下記の入力欄内をクリックして、カーソルを入れてみて下さい。案内文字が消えるはずです。 何もフォーム内に入力しないまま(ページ内の他の場所をクリックするなどして)カーソルを入力欄外に出せば、案内文字が戻ります。 ※JavaScriptが使えないか無効な環境では、案内文字は消えずに入ったままです。 上記のサンプルでは、以下のような動作が行われています。