フォームにあらかじめ入力されており、フォーカスすると消えるテキスト

フォームにあらかじめ薄い色で入力されており、フォーカスもしくは入力開始すると消えるテキストのことを、プレースホルダ―といいます。

以前は(PCサイトでは今も)、これを実現するために、JSでinputのvalueやcolorを操作する必要がありました。
HTML5に対応したスマートフォンブラウザでは、これを非常に簡単なコードで実現することができます。

<input type="text" placeholder="キーワードを入力" />

placeholderという属性に、あらかじめ表示させておきたい文字列を入力するだけです。

placeholderに入力した文字列は、inputのcolorに関わらず、グレーで表示されます。
input要素にフォーカスした時点、もしくは入力を開始した時点で消えます。
inputに何も入力しないままフォーカスを外すと、再びplaceholder属性の値が表示されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です