[解決済み】HTMLテキストボックスが空の時にヒントを表示させるには？

質問

ウェブページの検索ボックスに、"Search"という文字をグレーの斜体で表示させたいのですが、どうすればよいですか？検索ボックスにフォーカスが当たると、空のテキストボックスと同じように表示されるようにしたいです。すでにテキストが入っている場合は、通常のテキスト（黒、非イタリック）が表示されるようにします。これによって、ラベルを削除することによって、ごちゃごちゃするのを避けることができます。

ちなみに、これはページ上の Ajax を検索するため、ボタンがありません。

解決方法は？

この機能が新しいブラウザーにしかないことに満足している場合、もう一つの選択肢は、HTML 5の プレースホルダー 属性があります。

<input name="email" placeholder="Email Address">

スタイルがない場合、Chromeでは次のようになります。

デモを試すことができます こちら と CSSによるHTML5プレースホルダーのスタイリング .

を必ず確認してください。 この機能のブラウザ互換性 . Firefoxでのサポートは3.7で追加されました。Chrome は問題ありません。Internet Explorerは10でサポートが追加されただけです。入力プレースホルダをサポートしていないブラウザをターゲットにしている場合は、jQuery のプラグインである jQuery HTML5 プレースホルダー を追加し、以下のJavaScriptコードを追加するだけで、有効にすることができます。

$('input[placeholder], textarea[placeholder]').placeholder();