2009-09-18

フォームのテキストエリアなどにデフォルトを表示してフォーカスを当てると消えるやつ

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
フォームにデフォルト値を入れておいて、実際にフォーカスをあてて入力を行う際には、そのデフォルトが消えるというやつです。
jQueryのプラグインであるjQuery Watermark Pluginを使うと実現できます。

利用方法は、
http://www.skuare.net/2009/04/javascriptjquery_watermark_plu.html
を見ればよいです。

ポイントは、デフォルト文字の表示のされ方を指定するためにupdnWatermarkというクラスのcssを準備しておく必要があります。

jQuery Watermark Pluginからダウンロードするとサンプルがあるので、それをそのまま利用するのが簡単だと思います。

ただこのサンプルでは、CSSフレームワークであるBlueprintを利用していると気持ちのよい位置に文字が表示されませんでした。
なので私は、以下のような感じのcssを用意して使ってみました。

.updnWatermark label
{
position: absolute;
padding: 1em;
padding-left: 0.5em;
white-space: nowrap;
color: #999;
}

0 件のコメント: