フォームにフォーカスすると自動で消える初期値を設定する

フォームを作る際、機能の一つとして要素に初期値を入力し、フォーカスが当たった時には自動で消えるというものを実装する事が多々あると思います。
実装するに当たり、幾つかjQueryプラグインを試してみたのですがなかなか上手くいかず行き詰っていました。
そんな時に「初期値を表示させておくフォーム（※こちらのページは、現在リンク切れとなっております。）」の記事を発見し、上手く作動してくれたので今回は復習も兼ねてご紹介します。

フォームにフォーカスすると自動で消える初期値を設定する

お借りしたコードはこちら。

$(function(){
$('textarea,input[type="text"]').focus(function(){
if($(this).val() == this.defaultValue){
$(this).val('');
};
})
.blur(function(){
if($(this).val() == this.defaultValue | $(this).val() == ''){
$(this).val(this.defaultValue);
};
});
});
ここからは今回学んだ事の復習。
・.focusは入力領域を選択、フォーカスするメソッド。

二行目ではテキストエリアとテキストフィールドが選択された際に使用される部分。
・三行目はif文。.valは属性のvalue属性を返すので、今回は初期値として設定した文章。

.defaultValueはフォームのデフォルト文字列、つまりvalue属性を取得する。つまりフォームに何も書かれていない状態であれば.valと同じものを引っ張ってくる。

なのでif文の内容は「もし.valと.defaultValueの値が同じであれば.valの初期値を""にする」
・七行目の.blurは入力領域から選択、フォーカスを外すメソッド。

今回は選択が外れた際に使用される指定。

if文の内容は「もし.valと.defaultValue、及び""の値が同じであれば.valの初期値を.defaultValue(デフォルト文字列)にする」

フォーカスされたが何も書かれていない場合は、改めてデフォルトの文字列を表示する。
jQueryはまだまだ慣れていないので、一つずつ理解できるように進めていこうと思います。
         
                         
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る