jQuery勉強中です。

とりあえずドットインストール終わらせました。Ajaxを除いて。

そこで、サンプルとか見ながら色々作って勉強しようと思って漁っていたところ、目について、なおかつやりたかったことの1つの、

フォームにテキストを入れておき、テキストエリアをクリックしたらテキストが消える

ってやつ。

よくブログとかのサイト内検索とかでみかけるあれですねー。

現在、大学のサークルのHPの問い合わせフォームが寂しいコメントフォームみたいになってるのでこれで装飾しようと考えています。(ΦωΦ)ﾌﾌﾌ…

さてさて、

作り始めたのですが、途中でうん？と分からなくなったため、調べたところ、ありがたいことにWebクリエイターボックスさんがサンプルをあげられてました。

少しのコードで実装可能な20のjQuery小技集 – Webクリエイターボックス

いつもお世話になっております。

参考というか、ほぼコピペになってしまった…

jQueryのバージョンは2.0.2で期待の動作になりました。

最初、http://code.jquery.com/jquery-migrate-1.2.1.min.jsを読み込んでいたのですが、いざ出来て、フォーカス当てたらテキスト消えないという…

バージョンによって上手く動いたり動かなかったりというのは面倒ですね…

そして今回のキモというかがこれ

HTML

<input type="text" id="text" value="キーワードを入力">

CSS

#text {
    color: #b2b2b2;
}

JavaScript

$(function () {
    $("#text").focus(function () {
        if (this.value == "キーワードを入力")
            $(this).val("").css("color","#666");
    });
    $("#text").blur(function () {
        if (this.value == "")
            $(this).val("キーワードを入力").css("color","#b2b2b2");
    });
});

CSSの部分がフォームのデフォルトでのフォントカラーで、フォーカスをあててvalueが”キーワードを入力(初期)”の場合にそのvalueの値を消して、フォントカラーを#666に。フォーカスが外れた時に、未入力なら”キーワードを入力”を表示して、初期のカラーにする。という動作のようです。

最初一個目のif文の意味が分からなかったです…ｗ

val()はvalueの値をひろってくるものだとばかり…

idを変えれば他のフォームにも対応できるだろうな〜って思うんですけど、何個かフォームがある場合全部共通でやるべきですかね。

というかもう入れない方がいいのかな…？