プレースホルダを表示する

今回やりたいこと

1. プレースホルダを表示する
2. プレースホルダの色を変える
3. フォーカスを受けたら、プレースホルダを消す
4. フォーカスを失ったときに、テキスト欄が空なら、プレースホルダを表示する

今回使用したAPI

• focus(fn)

フォーカスを受け取ったタイミングで発生する。

• blur(fn)

フォーカスを失ったタイミングで発生する。

• val()

全ての要素のvalue属性を返す。

• jQuery.trim(str)

文字列の先頭と末尾から、空白を除去します。

• addClass(class)

指定した要素に、CSSクラスを追加する。

• removeClass(class)

指定した要素から、CSSクラスを削除する。

ソース

.html

<input type="text" id="text1" value="">

.js

$(function(){

    //デフォルトの入力文字列を作成
    var def_val="入力してください"
    $("#text1").val(def_val).addClass("def_color");

    //テキストボックスにフォーカスされたら
    $("#text1").focus(function() {
        if($(this).val() == def_val)
            $(this).val('').removeClass("def_color");

    //テキストボックスからフォーカスが外されたら
    }).blur(function() {
        if(jQuery.trim($(this).val()) == "") {
            $(this).val(def_val).addClass("def_color");
        }
    });
});

.css

.def_color {
    color: #ccc;
}